使用CSS的pointer-events屬性實(shí)現(xiàn)鼠標(biāo)穿透效果的技巧分享

1.阻止用戶的點(diǎn)擊動(dòng)作產(chǎn)生任何效果
2.阻止缺省鼠標(biāo)指針的顯示
3.阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
4.阻止JavaScript點(diǎn)擊動(dòng)作觸發(fā)的事件
一個(gè)CSS屬性能做所有的這么多事情！

當(dāng)使用pointer-events:none,表示它將捕獲不到任何點(diǎn)擊，而只是讓事件穿透到它的下面。代碼如下：

<style> 
 .overlay { 
 pointer-events: none; 
 } 
</style> 

<p id="overlay" class="overlay"></p>

如果值是auto，則效果和沒(méi)有定義pointer-events屬性相同，鼠標(biāo)不會(huì)穿透當(dāng)前層。在SVG中，該值和visiblePainted的效果相同。
這個(gè)pointer-events屬性有很多可以使用的屬性值，但大部分都是針對(duì)SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。

一些需要注意的關(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è)定。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com