【CSS】css控制鼠标点击事件（pointer-events）

微信订阅号：Rabbit_svip

pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。对于前端日常开发而言，只要了解 none 这个值就已经够我们玩一段时间了。

pointer-events: none;
意思就是让鼠标事件失效（链接、点击等事件）。

---

常用场合：获取验证码

微信订阅号：Rabbit_svip

给 <a> 标签定义一个 id=”btn”，然后通过 JS 控制 <a> 标签，点击之后模拟发送验证码，并让 <a> 标签添加一个定义好的 disable 样式。

最后设置2秒内不能再点击发送二维码请求。

微信订阅号：Rabbit_svip

可以看到上图效果。
第一次点击“发送验证码”按钮，控制台上有输出的，点击之后，按钮加了 pointer-events: none;，然后再按就没效果了，同时鼠标在按钮上也不会变成“一只手”。

除次之外，pointer-events: none; 还可以禁止 标签的页面跳转。

---

注意点：

1. pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中。
2. pointer-events: none; 只是用来禁用鼠标的事件，通过其他方式绑定的事件还是会触发的，比如键盘事件等。
3. 如果将一个元素的子元素 pointer-events 设置成其他值（比如：auto），那么当点击子元素时，还是会通过事件冒泡的形式出发父元素的事件。