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

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

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

The CSS

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

復制代碼代碼如下:.disabled { pointer-events: none; }

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

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

測試代碼：

復制代碼代碼如下:
<p>下面的這個鏈接上的 <code>pointer-events</code>屬性值是<code>none</code>。點擊它們，什么都不會發生。我還在“測試”鏈接上添加了監聽器。如果<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來屏蔽一些十分關鍵的觸發動作，因為這個樣式可以通過瀏覽器控制臺刪除掉！