浅谈pointer-events属性

前段时间在JQ后台管理项目中，偶然有个需求需要禁用hover效果，在查询资料后知道了pointer-events这个css3属性，于是决定系统了解一下。

pointer-events属性怎么用？

pointer-events这个c3属性，其作用是指定在什么情况下（如果有）某个特定的图形元素可以成为鼠标时间的target。

这个属性在SVG中有非常多的专用属性值，这里不做介绍，主要讲解两个常用属性值

auto—— 默认属性，效果和没有定义pointer-events相同，鼠标是不会穿透当前层，去发生事件

none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面层中的元素（鼠标事件全都拜拜）。但是如果子元素（下一层）设置了pointer-events为其他值，比如auto，鼠标还是会监听这个子元素。

常用场景：

1.穿过穿透层触发鼠标事件，让上层元素变为“空壳幽灵”

1.切换开关按钮状态：

点击提交按钮的时候，为了防止用户一直点击按钮发送请求，在请求返回之前，给按钮设置pointer-events：none；可以防止用户请求过多。相较于节流防抖，还是会更好一些，用户体验会更好

2.禁用hover，focus等效果

$('aside>ul>li').addClass("focus").css("pointer-events", "auto");