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

Tags:

文章作者: Lee

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

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

No comments yet.

Leave a comment

Search

文章分类

Links

Meta