而本文要說的pointer-events的風(fēng)格更像JavaScript，它能夠：

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

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

The CSS

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

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

一些需要注意的關(guān)于pointer-events的事項(xiàng)：

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

測(cè)試代碼：

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

<p><a href=”javascript:;” id=”testLink” style=”pointer-events:none;”>測(cè)試</a></p>

<p><a href=”javascript:;” class=”pointerLogo” style=”pointer-events:none;”>測(cè)試</a></p>

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

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