pointer-events

提示

虽然它最初是为 SVG 设计的，但现在广泛应用于 HTML 元素。

pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

常用属性值：

• auto：默认值。元素表现得像往常一样：鼠标事件在元素边界内触发。 |
• none：元素 永远不会 成为鼠标事件的目标。点击、悬停、拖拽等事件会 穿透 该元素，并触发其下方 (“背面”) 的元素。

注意：还有许多其他值（如 visiblePainted, fill 等），但它们仅适用于 SVG。对于普通的 HTML 元素，只需要关注 auto 和 none。

应用场景

点击穿透图层 (Overlay Click-through)

这是最常见的使用场景。

当有一个覆盖在内容上的透明遮罩层（例如：加载动画容器、水印、自定义光标层）时，默认情况下它会挡住下方内容的点击。

设置 pointer-events: none 可以让鼠标交互“穿透”这个遮罩层。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 让视觉可见，但交互不可见 */
  pointer-events: none;
  z-index: 999;
}

禁用元素交互 (Visual Disabled)

不仅是点击，hover 状态也会被禁用。这常用于创建一个“禁用”状态的 UI，而不需要移除绑定的事件监听器。

.btn-disabled {
  opacity: 0.5;
  pointer-events: none; /* 此时 :hover 样式也不会触发，onClick 也不会触发 */
}

重要细节与坑

鼠标手势 (cursor) 失效

当 pointer-events: none 时，元素本身定义的 cursor: pointer 或 cursor: not-allowed 不会生效，因为鼠标根本“感觉不到”这个元素的存在。

解决方案： 如果你希望鼠标移上去显示“禁止”符号，需要在外层包裹一个父容器，并在父容器上设置 cursor。

<div class="wrapper" style="cursor: not-allowed">
  <button style="pointer-events: none">Disabled Button</button>
</div>

交互恢复与事件冒泡

这是 pointer-events: none 最容易让人困惑但也最强大的特性。

核心机制：

1. 子元素从不继承：如果父元素设置了 none，子元素并不会真的“继承”这个属性。它们看起来不可点击是因为由于父元素自身忽略了事件，导致作为父元素一部分的子元素区域默认也无法响应（除非子元素自己明确声明了 auto）。
2. 事件冒泡不断：pointer-events: none 只是让元素自身“隐身”，不再作为事件的目标 (target)，但不会斩断 DOM 的事件冒泡流。

常见应用模式： 让容器穿透，但内部元素可点。

.modal-overlay {
  pointer-events: none; /* 1. 容器本身允许穿透（点击空白处会穿透到底层） */
}

.modal-content {
  pointer-events: auto; /* 2. 显式恢复内部元素的交互 */
}

JavaScript 行为： 在此模式下：

• 点击 .modal-overlay 的空白处 -> 事件穿透，底层元素触发事件。
• 点击 .modal-content -> 子元素触发事件 -> 事件正常向上传播。
• 如果你在 .modal-overlay 上绑定了 onclick，当点击 .modal-content 时，依然会触发这个监听器（因为冒泡机制正常工作）。