摘要:出现一前端同事跟我说你把这段加到全局的里面然后,悲剧了,上线后发现我的图片都不能点击了。解决情急之下,在所有需要点击的标签外边都包了一层,把点击事件移到上,了,但是并不知道做了什么导致了这样的问题。
bug出现:
一前端同事跟我说:你把这段加到全局的css里面
img{ pointer-events: none }
然后,悲剧了,上线后发现我的图片都不能点击了。
bug解决:
情急之下,在所有需要点击的img标签外边都包了一层div,把点击事件移到div上,ok了,但是并不知道做了什么导致了这样的问题。
bug分析:
今天细细回想,想到上线前加了上面的那段代码,跑去一百度pointer-events: none,恍然大悟,都怪自己道行太浅。。。
知道了这点之后,我就去F12一下看元素的属性,结果我发现,加了pointer-events: none之后,点击这个按钮
都选不到这个元素了。
这个属性是不是太强大!!!
bug扩展:
继续百度这个属性,发现这个属性有很多神奇的用法。具体例子比如:
http://baijiahao.baidu.com/s?...
https://www.zhangxinxu.com/wo...
以后遇到需要在页面上加一层遮罩,但是又可以点击下面的元素的这种(点透),就可以考虑一下这个属性啦。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116790.html
摘要:因为默认开启了所有攻击防御,需要禁用的防御。版本变化有点大,本次已成功升级了基础依赖,及注册中心配置中心。其他像代替了及其他组件再慢慢升级,的快速发展令升级变得非常蛋疼,本文记录了升级过程中踩过的所有的坑。。。 Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次...
摘要:值得一提的是,仅仅是鼠标事件失效,用键还是可以选中该链接的,然后打开,这个时候可以去掉标签的属性,就不能让键选中了实践一今天改了一个众审中心的。 简介 pointer-events: none 真是个神奇的属性。 该属性有什么用?借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说:test pointer-events: none 顾名思义,就是鼠标事...
摘要:上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。 MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。pointer-events 属性值有: /* Keyword va...
摘要:上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。 MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。pointer-events 属性值有: /* Keyword va...
摘要:属性效果和没有定义属性相同,鼠标不会穿透当前层。在中,该值和的效果相同。元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。其它属性值为专用,这里不再多介绍了。 pointer-events属性 auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。 none——元素不再是鼠标事...
阅读 1374·2021-11-15 18:11
阅读 2506·2021-08-19 10:56
阅读 668·2021-08-09 13:42
阅读 784·2019-08-30 15:53
阅读 2077·2019-08-30 10:55
阅读 3134·2019-08-29 17:18
阅读 1425·2019-08-29 13:45
阅读 536·2019-08-29 13:15