踩了pointer-events:none的坑

本文通过一个实际案例,详细解析了 CSS 中 pointer-events 属性的作用及使用方法,并介绍了该属性的一些高级应用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

bug出现:
一前端同事跟我说:你把这段加到全局的css里面

img{
   pointer-events: none
}

然后,悲剧了,上线后发现我的图片都不能点击了。

bug解决:
情急之下,在所有需要点击的img标签外边都包了一层div,把点击事件移到div上,ok了,但是并不知道做了什么导致了这样的问题。

bug分析:
今天细细回想,想到上线前加了上面的那段代码,跑去一百度pointer-events: none,恍然大悟,都怪自己道行太浅。。。

clipboard.png

知道了这点之后,我就去F12一下看元素的属性,结果我发现,加了pointer-events: none之后,点击这个按钮
clipboard.png
都选不到这个元素了。
这个属性是不是太强大!!!

clipboard.png

bug扩展:
继续百度这个属性,发现这个属性有很多神奇的用法。具体例子比如:
http://baijiahao.baidu.com/s?...
https://www.zhangxinxu.com/wo...
以后遇到需要在页面上加一层遮罩,但是又可以点击下面的元素的这种(点透),就可以考虑一下这个属性啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值