踩了pointer-events:none的坑

Terry_Tai 發(fā)布于2019-08-30 15:53 / 798人閱讀

摘要：出現(xiàn)一前端同事跟我說你把這段加到全局的里面然后，悲劇了，上線后發(fā)現(xiàn)我的圖片都不能點擊了。解決情急之下，在所有需要點擊的標簽外邊都包了一層，把點擊事件移到上，了，但是并不知道做了什么導(dǎo)致了這樣的問題。

bug出現(xiàn)：
一前端同事跟我說：你把這段加到全局的css里面

img{
   pointer-events: none
}

然后，悲劇了，上線后發(fā)現(xiàn)我的圖片都不能點擊了。

bug解決：
情急之下，在所有需要點擊的img標簽外邊都包了一層div，把點擊事件移到div上，ok了，但是并不知道做了什么導(dǎo)致了這樣的問題。

bug分析：
今天細細回想，想到上線前加了上面的那段代碼，跑去一百度pointer-events: none，恍然大悟，都怪自己道行太淺。。。

知道了這點之后，我就去F12一下看元素的屬性，結(jié)果我發(fā)現(xiàn)，加了pointer-events: none之后，點擊這個按鈕

都選不到這個元素了。
這個屬性是不是太強大?。?！

bug擴展：
繼續(xù)百度這個屬性，發(fā)現(xiàn)這個屬性有很多神奇的用法。具體例子比如：
http://baijiahao.baidu.com/s?...
https://www.zhangxinxu.com/wo...
以后遇到需要在頁面上加一層遮罩，但是又可以點擊下面的元素的這種（點透），就可以考慮一下這個屬性啦。

GPU云服務(wù)器云服務(wù)器語言的坑爹設(shè)計阿里云服務(wù)器的坑云服務(wù)器踩過的坑

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116790.html

相關(guān)文章

Spring Cloud 升級最新 Finchley 版本，踩了所有的坑！

摘要：因為默認開啟了所有攻擊防御，需要禁用的防御。版本變化有點大，本次已成功升級了基礎(chǔ)依賴，及注冊中心配置中心。其他像代替了及其他組件再慢慢升級，的快速發(fā)展令升級變得非常蛋疼，本文記錄了升級過程中踩過的所有的坑。。。 Spring Boot 2.x 已經(jīng)發(fā)布了很久，現(xiàn)在 Spring Cloud 也發(fā)布了基于 Spring Boot 2.x 的 Finchley 版本，現(xiàn)在一起為項目做一次...

WelliJhon 2019-08-19 10:54 評論0 收藏0
pointer-events: none 在 SegmentFault 中的兩個應(yīng)用場景

摘要：值得一提的是，僅僅是鼠標事件失效，用鍵還是可以選中該鏈接的，然后打開，這個時候可以去掉標簽的屬性，就不能讓鍵選中了實踐一今天改了一個眾審中心的。簡介 pointer-events: none 真是個神奇的屬性。該屬性有什么用？借用 CSS3 pointer-events:none 應(yīng)用舉例及擴展的總結(jié)來說：test pointer-events: none 顧名思義，就是鼠標事...

jasperyang 2019-08-29 15:29 評論0 收藏0
css不常見屬性之pointer-events

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網(wǎng)友敘帝利給出了一種使用場景。加上則不會響應(yīng)事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...

peixn 2019-08-02 11:36 評論0 收藏0
css不常見屬性之pointer-events

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網(wǎng)友敘帝利給出了一種使用場景。加上則不會響應(yīng)事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...

AndroidTraveler 2019-08-30 15:54 評論0 收藏0
pointer-events

摘要：屬性效果和沒有定義屬性相同，鼠標不會穿透當前層。在中，該值和的效果相同。元素不再是鼠標事件的目標，鼠標不再監(jiān)聽當前層而去監(jiān)聽下面的層中的元素。其它屬性值為專用，這里不再多介紹了。 pointer-events屬性 auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。 none——元素不再是鼠標事...

lufficc 2019-08-30 15:55 評論0 收藏0