CSS的pointer-events屬性詳細(xì)介紹（作用和注意事項(xiàng)）

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

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

而本文要說(shuō)的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來(lái)解禁父元素的阻止鼠標(biāo)事件限制。
2.如果你對(duì)一個(gè)元素設(shè)置了click事件監(jiān)聽(tīng)器，然后你移除了pointer-events樣式聲明，或把它的值改變?yōu)閍uto，監(jiān)聽(tīng)器會(huì)重新生效?；旧?，監(jiān)聽(tīng)器會(huì)遵守pointer-events的設(shè)定。

測(cè)試代碼：

復(fù)制代碼

代碼如下:

<p>下面的這個(gè)鏈接上的 <code>pointer-events</code>屬性值是<code>none</code>。點(diǎn)擊它們，什么都不會(huì)發(fā)生。我還在“測(cè)試”鏈接上添加了監(jiān)聽(tīng)器。如果<code>pointer-events</code>的值是<code>none</code>，對(duì)話框就不會(huì)彈出來(lái)，你可以在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)站上，他們拿它來(lái)禁止按鈕的點(diǎn)擊，這樣的好處是樣式上也得到了控制。當(dāng)然，不要使用pointer-events來(lái)屏蔽一些十分關(guān)鍵的觸發(fā)動(dòng)作，因?yàn)檫@個(gè)樣式可以通過(guò)瀏覽器控制臺(tái)刪除掉！