踩了pointer-events:none的坑

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

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

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

img{
   pointer-events: none
}

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

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

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

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

都選不到這個(gè)元素了。
這個(gè)屬性是不是太強(qiáng)大?。?！

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116790.html

相關(guān)文章

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

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

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

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

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

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

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

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

AndroidTraveler 2019-08-30 15:54 評(píng)論0 收藏0
pointer-events

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

lufficc 2019-08-30 15:55 評(píng)論0 收藏0