出处：掘金

原作者：阿怼丶

pointer-events 是什么？

在日常的前端开发中，我们经常会遇到这样的场景：

pointer-events 是一个 CSS 属性，用于控制元素是否对鼠标事件（如点击、hover）做出响应。它最初是为 SVG 元素设计的，但现在已经可以用于 HTML 元素，并被广泛使用

MDN pointer-events 中文文档

常见取值与含义

pointer-events: auto | none;

pointer-events: auto

默认值，元素会响应鼠标事件，例如 click、hover、mousedown、mouseup 等

pointer-events: none

表示该元素不会响应任何鼠标事件，事件会“穿透”该元素传递到其下方的元素

典型应用场景

实现点击穿透

有时候我们会用一个透明的遮罩层来做一些 UI 效果，但又不希望它阻止用户点击下面的按钮：

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

这样设置后，遮罩层不会阻止用户与下层元素交互

只允许子元素接收点击事件

<div class="outer">
  <button class="inner">点击我</button>
</div>

.outer {
  pointer-events: none;
}
.inner {
  pointer-events: auto;
}

这样可以让 .outer 不响应点击事件，但 .inner 仍然可以点击，非常适合用于图层控制。

防止元素被点击（例如禁用按钮）

有时候我们想通过样式实现“不可点击”效果：

.button-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

注意：这只是视觉和交互上的禁用，不影响页面结构或可访问性，实际功能控制还需搭配 JavaScript

和 JavaScript 搭配使用

你还可以动态控制元素是否可以被点击：

element.style.pointerEvents = 'none';

// 3 秒后恢复
setTimeout(() => {
  element.style.pointerEvents = 'auto';
}, 3000);

适合用于节流、防止连点、过渡动画控制等场景

注意事项