css中的pointer-events样式像js一样控制绑定事件

星期二, 2020-01-14 | Author: Lee | html5 | 2,912 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

赏

Tags:

文章作者: Lee

本文地址： https://www.pomelolee.com/2005.html

除非注明，Pomelo Lee文章均为原创，转载请以链接形式标明本文地址

No comments yet.

Leave a comment

Search

相关文章

热门文章

最新文章

文章分类

标签云

Links

Meta