CSS的pointer-events屬性詳細介紹

本篇內容主要講解“CSS的pointer-events屬性詳細介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS的pointer-events屬性詳細介紹”吧!

而本文要說的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，監聽器會重新生效。基本上，監聽器會遵守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" >測試</a></p>

<p><a href="javascript:;" class="pointerLogo" >測試</a></p>

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

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

到此，相信大家對“CSS的pointer-events屬性詳細介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！