1.阻止用戶的點擊動作產生任何效果
2.阻止缺省鼠標指針的顯示
3.阻止CSS里的hover和active狀態的變化觸發事件
4.阻止JavaScript點擊動作觸發的事件
一個CSS屬性能做所有的這么多事情!
當使用pointer-events:none,表示它將捕獲不到任何點擊,而只是讓事件穿透到它的下面。代碼如下:
<style> .overlay { pointer-events: none; } </style> <p id="overlay" class="overlay"></p>
如果值是auto,則效果和沒有定義pointer-events屬性相同,鼠標不會穿透當前層。在SVG中,該值和visiblePainted的效果相同。
這個pointer-events屬性有很多可以使用的屬性值,但大部分都是針對SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。
一些需要注意的關于pointer-events的事項:
1.子元素可以聲明pointer-events來解禁父元素的阻止鼠標事件限制。
2.如果你對一個元素設置了click事件監聽器,然后你移除了pointer-events樣式聲明,或把它的值改變為auto,監聽器會重新生效?;旧?,監聽器會遵守pointer-events的設定。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com