css的pointer-events属性

今天无意间看见公司的代码里,一个标签,绑定了一个class后,就无法点击了,开始以为是写了阻止默认事件,后来发现没有.最后再css中找到了这样的代码:

.flowNodeRightMenuDisabled {
  pointer-events: none;
  color: #bfc0bf;
}

什么是pointer-events?

pointer-events是css的一个属性,用来指定什么情况下元素可以成为鼠标事件的target,包括鼠标的样式

属性值

pointer-events有很多属性值,但是对于浏览器而言,只有两个可用:auto  none

auto:默认值,鼠标不会穿透当前层

none:元素不能成为鼠标事件的target.   但是当后代元素的pointer-events属性值为其他时,鼠标可以指向后代元素(即穿透当前层)

应用

1.穿透当前层

很多元素定位在地图层的上面,导致地图层无法使用,可以给上面的元素设置pointer-events:none,这样下面的地图层就可以操作了.但是,会发现这些元素本身会被无视掉,我们可以给里面的元素设置pointer-events:auto

2.禁用click,focus,actice,hover等效果