css3中pointer-events屬性

2021-12-29 花和尚的筆記



    pointer-events  css屬性指定在什麼情況下(如果有)某個特定的圖形元素可以成為滑鼠事件的target(包括滑鼠的樣式)



/* Keyword values */pointer-events: auto;pointer-events: none;pointer-events: visiblePainted; /* SVG only */pointer-events: visibleFill;    /* SVG only */pointer-events: visibleStroke;  /* SVG only */pointer-events: visible;        /* SVG only */pointer-events: painted;        /* SVG only */pointer-events: fill;           /* SVG only */pointer-events: stroke;         /* SVG only */pointer-events: all;            /* SVG only */
/* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: unset;

pointer-events屬性有很多值,但對於我們來說,只有auto和none兩個值常用,其他的幾個是針對SVG的(本身這個屬性就來自於SVG技術)

auto  ——  效果和沒有定義`pointer-events`屬性相同,滑鼠不會穿透當前層

none ——  元素永遠不會成為滑鼠的target目標,但是,當其子元素的`pointer-events`屬性指定為其他值時,滑鼠事件可以指向子元素



Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個css3屬性,ie6/7/8/9都不支持,Opera在SVG中支持該屬性但是html中不支持



1. 穿透當前層

縮放移動控制項中(紅框內)滾動滑鼠和拖動事件是不起作用的,我們給這個div設置pointer-events: none,然後就會發現下面的地圖就可以拖動和點擊了,但是你又會發現操作區域本身也無法操作了,這時我們可以給裡面的元素重新設置pointer-events: auto

2. tab切換時,禁用當前tab的事件,只有切換其他tab才觸發事件,給tab的active多設置一個屬性pointer-events: none

3. 防止用戶重複點擊,為了防止用戶一直點擊按鈕,發送請求,當請求未返回結果之前,給按鈕增加 pointer-events: none

相關焦點

  • pointer-events,一個神奇的css屬性
    搞前端的朋友們應該聽說過這個屬性吧。每年聖誕節的時候,許多網頁上都會掛出一個雪花飄落的特效增加一些節日氣氛。
  • CSS3的新特性
    // 選擇帶有title屬性的img元素// 例:<img src="p.png" title="test"> img[title]{ border:1px solid #fff;}// 選擇title屬性為name的img元素// 例:<img src="p.png" title="name"> img[title
  • 前端工程師必備的css3動畫技巧
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫本文是筆者之前文章用css3實現驚豔面試官的背景即背景動畫(高級附源碼)的續篇也是介紹css3技巧的文章,因為css這塊知識難點不是很多,更多的在於去熟悉css3的新特性和基礎理論知識。
  • css3必須了解的知識 css中常見的樣式屬性和值
    css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性內外邊距滑鼠光標屬性列表樣式定位屬性浮動和清除浮動滾動條樣式顯示和隱藏字體與顏色font-family:微軟雅黑;/*字體名稱(類型):微軟雅黑,黑體,楷體,宋體*/font-size: 20px;/*字體大小*/font-weight: 600;/*字體加粗*/font-style: italic
  • H5中CSS3動畫屬性詳解
    css動畫效果下面讓我們來說一說動畫的實現動畫(animation)是CSS3中具有顛覆性的特徵之一,可通過設置多個節點來精確控制一個或一組動畫在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
  • 大神教你用css3-animation製作逐幀動畫
    今天來聊聊css3中的動畫屬性animation,對這個屬性懵懂是在很早的時候有前輩用這個 animation 屬性來寫了一個菊花打轉的
  • 10個CSS3動畫工具,值得你收藏!
    在css3中引入了全新的動畫語法,它能夠幫助你在設計中實現許多有趣的事情。通常構建炫酷的動畫是非常複雜和費時的,而使用動畫庫和生成器則可以幫助你完美處理這一切。在這篇文章中我們將推薦十款出色的工具,它們可以幫助你更快更輕鬆地完成自己的動畫。
  • css3 box-sizing屬性筆記
    box-sizing屬性定義及用法box-sizing屬性是css3中新增的屬性,允許你以某種方式定義某些元素,以適應指定區域(假如您需要並排放置兩個帶邊框的框,可通過將 box-sizing屬性設置為"border-box",這可令瀏覽器呈現出帶有指定寬度和高度的框,並把邊框和內邊距放入框中
  • 有趣的css屬性content
    content 屬性normal這是content屬性的默認值,在偽元素中會被認定為nonenone指定不產生偽元素url可以使用圖片來進行展示,比如<style>div{/images/有趣的css屬性content/css世界.jpg');display: block;}</style><div></div>效果如下圖url的參數有很多種,最常用的就是路徑然後就是icon、svg、base64編碼的圖片,但是不支持css3漸變背景圖。
  • 如何使用神奇的css中的focus-within
    (shadow DOM 樹中的後代也包括在內)❞❝該選擇器非常實用。舉個通俗的例子:表單中的某個<input>欄位獲得焦點時,整個表單的<form> 元素都可被高亮。❞:focus-within 的冒泡性❝這個屬性有點類似 Javascript 的事件冒泡,從可獲焦元素開始一直冒泡到根元素 html,都可以接收觸發 :focus-within事件,❞舉個例子「HTML」<p>試試在這個表單中輸入點什麼
  • 傳智播客詳解Css3九大常用屬性
    在Css3的學習和實際操作中,我們經常會接觸到一些常用屬性,比如字體、文本、列表和背景等。下面,傳智播客將對常用的Css3九大屬性進行詳解。1.傳智播客詳解Css3九大常用屬性—字體l Font-size:字的大小;例如font-size:14px;l Font-family:字體; font-family:楷體;默認是宋體;l Font-weight:bold///normal; bold加粗 normal正常l Font-style:normal//italic;
  • 5個很常用的CSS3網頁小實例
    width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-size:24px; text-align:center; line-height:40px; cursor:pointer
  • 值得你收藏的10個CSS3動畫工具
    在CSS3中引入了全新的動畫語法,它能夠幫助你在設計中實現許多有趣的事情。通常構建炫酷的動畫是非常複雜和費時的,而使用動畫庫和生成器則可以幫助你完美處理這一切。在這篇文章中我們將推薦十款出色的工具,它們可以幫助你更快更輕鬆地完成自己的動畫。1. CSS3Gen - CSS3動畫生成器
  • CSS3實現5個常用的網頁動畫效果
    width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-size:24px; text-align:center; line-height:40px; cursor:pointer