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;當此屬性未指定時，visiblePainted值的相同特征適用於 SVG（可縮放矢量圖形） 內容。
除了指示該元素不是鼠標事件的目標之外，值none表示鼠標事件“穿透”該元素並且指定該元素“下面”的任何東西。
| 初始值 | auto |
|---|---|
| 適用元素 | all elements |
| 是否是繼承屬性 | yes |
| 適用媒體 | visual |
| 計算值 | as specified |
| Animation type | discrete |
| 正規順序 | the unique non-ambiguous order defined by the formal grammar |
pointer-events 更像是JavaScript，它能夠：
-
阻止用戶的點擊動作產生任何效果
-
阻止缺省鼠標指針的顯示
-
阻止CSS里的 hover 和 active 狀態的變化觸發事件
-
阻止JavaScript點擊動作觸發的事件
實際代碼使用中案例：
1、提交頁面，提交按鈕點擊后，添加這個樣式屬性（），來防止重復提交。 @camnpr
2、一些層的絕對定位，覆蓋按鈕，穿透可以點擊它。等等。
來看下具體用法：
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inheritpointer-events屬性有很多值，但是對於瀏覽器來說，只有auto和non兩個值可用，其它的幾個是針對SVG的(本身這個屬性就來自於SVG技術)。
pointer-events屬性值詳解
-
auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
-
none——元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的。
-
其它屬性值為SVG專用，這里不再多介紹了。
瀏覽器兼容性
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持（IE11又支持，不過很好的一點是在ie中給a加disabled 點擊事件自動無效。），Opera在SVG中支持。 但是 該屬性HTML中 不支持 。