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