CSS的pointer-events屬性詳細介紹（作用和注意事項）

發(fā)布時間：2014-04-23 16:51:38 作者：佚名

我要評論

現(xiàn)代瀏覽器里CSS的職責范圍和JavaScript的越來越模糊分不清。比如CSS里-webkit-touch-callout屬性在iOS里能禁止當用戶點擊時彈出氣泡框

而本文要說的pointer-events的風格更像JavaScript，它能夠：

1.阻止用戶的點擊動作產生任何效果
.阻止缺省鼠標指針的顯示
3.阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
4.阻止JavaScript點擊動作觸發(fā)的事件

一個CSS屬性能做所有的這么多事情！

The CSS

這個pointer-events屬性有很多可以使用的屬性值，但大部分都是針對SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止點擊、狀態(tài)變化和鼠標指針變化：

復制代碼

代碼如下:

.disabled { pointer-events: none; }

一些需要注意的關于pointer-events的事項：

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

測試代碼：

復制代碼

代碼如下:

<p>下面的這個鏈接上的 <code>pointer-events</code>屬性值是<code>none</code>。點擊它們，什么都不會發(fā)生。我還在“測試”鏈接上添加了監(jiān)聽器。如果<code>pointer-events</code>的值是<code>none</code>，對話框就不會彈出來，你可以在console里修改它的值，這樣點擊后就會彈出對話框！</p>

<p><a href="javascript:;" id="testLink" style="pointer-events:none;">測試</a></p>

<p><a href="javascript:;" class="pointerLogo" style="pointer-events:none;">測試</a></p>

<script type="text/javascript">
document.getElementById("testLink").addEventListener("click", function(e) {
alert("點擊了!");
});
</script>

我第一次注意到pointer-events屬性是在Firefox Marketplace網站上，他們拿它來禁止按鈕的點擊，這樣的好處是樣式上也得到了控制。當然，不要使用pointer-events來屏蔽一些十分關鍵的觸發(fā)動作，因為這個樣式可以通過瀏覽器控制臺刪除掉！