pointer-events 是什么？

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

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

常见取值与含义

pointer-events: auto | none;

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

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

有时候我们会用一个透明的遮罩层来做一些 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

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

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

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