pointer-events

pointer-events是css的属性

指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

  • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

  • none——元素永远不会成为鼠标事件的target(目标)。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默

     认就可以穿透当前层,因为pointer-events默认为auto

例如:

pointer-events

 

 

 这是一个视频全屏和序号(1/10)重叠的展示情况(同级元素不存在父子元素直接的冒泡和捕获效果),想要点击的时候全屏效果不受序号div的遮盖影响

1.不设置pointer-events时,默认是auto,此时点击全屏操作区域会由于遮盖原因,无法正常使用

2.如果对序号div设置pointer-events为none,则全屏操作区域可以正常点击操作,不受序号div的影响

 

上一篇:记录一个CSS黑科技属性--pointer-events


下一篇:Angular 问题解决 —— 给父元素添加点击事件,发生了事件穿透;防止子元素成为 target;popover 无法计算出实际点击位置; point-events: none 妙用