css中pointer-events屬性

pointer-events 更像是JavaScript,它能夠:

阻止用戶的點擊動作產(chǎn)生任何效果

阻止缺省鼠標(biāo)指針的顯示

阻止CSS里的 hover 和 active 狀態(tài)的變化觸發(fā)事件

阻止JavaScript點擊動作觸發(fā)的事件

實際代碼使用中案例:

1、提交頁面,提交按鈕點擊后,添加這個樣式屬性(style="pointer-events"),來防止重復(fù)提交。 @camnpr

2、一些層的絕對定位,覆蓋按鈕,穿透可以點擊它。等等。

pointer-events屬性值詳解
auto——效果和沒有定義pointer-events屬性相同,鼠標(biāo)不會穿透當(dāng)前層。在SVG中,該值和visiblePainted的效果相同。

none——元素不再是鼠標(biāo)事件的目標(biāo),鼠標(biāo)不再監(jiān)聽當(dāng)前層而去監(jiān)聽下面的層中的元素。但是如果它的子元素設(shè)置了pointer-events為其它值,比如auto,鼠標(biāo)還是會監(jiān)聽這個子元素的。

其它屬性值為SVG專用,這里不再多介紹了。

瀏覽器兼容性
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性,IE6/7/8/9都不支持(IE11又支持,不過很好的一點是在ie中給a加disabled 點擊事件自動無效。),Opera在SVG中支持。 但是 該屬性HTML中 不支持 。

作者:翻翻過去那場雪
鏈接:http://www.imooc.com/article/48022

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容