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

学习委员

关注

发布于: 2021 年 02 月 03 日

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

pointer-events: none;

意思就是让鼠标事件失效（链接、点击等事件）。

常用场合：获取验证码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>pointer-events</title>  <style>    a {      color: #ffffff;      margin: 50px 100px;      display: inline-block;      padding: 6px 10px;      background: firebrick;      text-decoration: none;      border-radius: 20px;    }    .disable {      pointer-events: none;      background-color: #666666;    }  </style></head><body>  <a href="javascript:;" id="btn">发送验证码</a>  <script>    btn.onclick = () => {      btn.classList.add('disable')      console.log('验证码：1234')      setTimeout(() => {        btn.classList.remove('disable')      }, 2000)    }  </script></body></html>

复制代码

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

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

可以看到上图效果。

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

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

注意点：

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

发布于: 2021 年 02 月 03 日阅读数: 10

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

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

学习委员

评论