現(xiàn)代瀏覽器里CSS的職責范圍和JavaScript的越來越模糊分不清。比如CSS里-webkit-touch-callout屬性在iOS里能禁止當用戶點擊時彈出氣泡框。而本文要說的pointer-events的風格更像JavaScript，它能夠：
1.阻止用戶的點擊動作產(chǎn)生任何效果
2.阻止缺省鼠標指針的顯示
3.阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
4.阻止JavaScript點擊動作觸發(fā)的事件
一個CSS屬性能做所有的這么多事情！

當使用pointer-events:none,表示它將捕獲不到任何點擊，而只是讓事件穿透到它的下面。代碼如下：

如果值是auto，則效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
這個pointer-events屬性有很多可以使用的屬性值，但大部分都是針對SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。

一些需要注意的關于pointer-events的事項：
1.子元素可以聲明pointer-events來解禁父元素的阻止鼠標事件限制。
2.如果你對一個元素設置了click事件監(jiān)聽器，然后你移除了pointer-events樣式聲明，或把它的值改變?yōu)閍uto，監(jiān)聽器會重新生效?；旧希O(jiān)聽器會遵守pointer-events的設定。

最新評論