pointer-events 鼠标事件控制开关

禁用鼠标事件,设置pointer-events属性为none: pointer-events:none 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。

开启鼠标事件,设置pointer-events为auto: pointer-events:auto 效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。

作用：

阻止用户的点击动作产生任何效果

阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件

阻止JavaScript点击动作触发的事件

提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。

举例

阻止点击事件的效果

 

 代码展示

 

 

运行效果：a 标签的默认手型效果没有，点击默认跳转也没有了

 

 

 解除元素的hover效果

 

 代码展示

 

 

运行效果如下：鼠标移入hover效果就没有了，即背景不会变成红色了

 

 

pointer-events：none的运用场景

1、 任何元素设置pointer-event：none的效果相当于input[type=text|button|radio|checkbox] 设置disabled 属性，可以实现事件的禁用，例如： <a href="xxxxxx" style="pointer-events: none">click me</a> 这个链接，是点不了的，并且 hover 也没有效果,但是可以通过tab来选中该元素，并按下enter键来触发链接，当href属性去掉，就不能通过tab进行触发

2、 当要禁用select下拉框可以设置pointer-event:none；

3、 当很多元素需要定位在一个地图层上面，需用到绝对定位、相对定位的元素，这样的话，这些元素就会盖住下面的地图层，以至于地图层无法操作。这时元素设置 pointer-events: none，然后地图就可以拖动和点击了。但是操作区域本身却无法操作了，可以再给需要操作的元素区域设置为 pointer-events:auto