css中的pointer-events样式像js一样控制绑定事件
星期二, 2020-01-14 | Author: Lee | html5 | 2,939 views
1.今天处理了一个页面,有个按钮做了绑定事件,发现在其他页面都可以正常触发,有个页面就死活不行,
在印象中一直以为只有js才能控制点击等事件,排查了半天,最终还是把矛头指向了css上面,最终确认是pointer-events造成.
修改后搞定,也第一次认识了此css3下的pointer-events.
影响的代码如下:
[collectList] span i { pointer-events: none; } |
2.在css3中pointer-events(阻止hover、active、onclick触发事件)就像js一样
它能够:
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件
实际代码使用中案例:
1、提交页面,提交按钮点击后,添加这个样式属性(style=”pointer-events”),来防止重复提交。
2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。
来看下具体用法:
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。
更多用法可以参照:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/pointer-events
文章作者: Lee
本文地址: https://www.pomelolee.com/2005.html
除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址
No comments yet.
Leave a comment
Search
相关文章
热门文章
最新文章
文章分类
- ajax (10)
- algorithm-learn (3)
- Android (6)
- as (3)
- computer (85)
- Database (30)
- disucz (4)
- enterprise (1)
- erlang (2)
- flash (5)
- golang (3)
- html5 (18)
- ios (4)
- JAVA-and-J2EE (186)
- linux (143)
- mac (10)
- movie-music (11)
- pagemaker (36)
- php (50)
- spring-boot (2)
- Synology群晖 (2)
- Uncategorized (6)
- unity (1)
- webgame (15)
- wordpress (33)
- work-other (2)
- 低代码 (1)
- 体味生活 (40)
- 前端 (21)
- 大数据 (8)
- 游戏开发 (9)
- 爱上海 (19)
- 读书 (4)
- 软件 (3)