应直接给遮挡元素本身加 pointer-events: none，而非父容器或兄弟节点；该属性仅对当前元素生效，不继承也不跳过子元素，且 opacity: 0 或 visibility: hidden 仍需配合 pointer-events: none 才能透传点击。
直接给遮挡元素本身加 pointer-events: none，而不是它的父容器或兄弟节点——加错位置是 80% 点击穿透失效的根源。
必须作用于真正盖住目标的元素
浏览器事件捕获是按渲染树自顶向下走的，pointer-events: none 只对当前元素生效，不“传染”也不“跳过”。如果遮罩是 .mask，但你把样式写在它的父容器 .dialog 上，那 .mask 依然会拦截点击，因为浏览器压根没去检查它。
实操建议：
- 用 Chrome DevTools 的 “Rendering” 面板勾选
Hit test borders，一眼看出哪一层实际覆盖了点击区域 - 常见遮挡元素包括：
position: fixed、position: absolute、float元素，以及 SVG 中的<g></g>或<path></path> - 不要依赖
z-index判断是否该加——再高的z-index，不设none仍会拦截；再低的z-index，只要没被挡住且未设none，照样响应
父设 none 后，子元素写 auto 完全无效
这是最常踩的坑：给 .overlay 加了 pointer-events: none，再给里面的 .close-btn 写 pointer-events: auto，结果按钮点不动。原因很直接——浏览器在 hit-testing 阶段就跳过了整棵子树，根本不会读取子元素的 pointer-events 值。
立即学习“前端免费学习笔记（深入）”；
错误结构：<div class="overlay" style="pointer-events:none"><button class="close">×</button></div>
可行方案：
- 把按钮提为兄弟节点：
<div class="overlay"></div> <button class="close">×</button>，再用z-index和position: absolute控制视觉层级 - 用伪元素模拟遮罩背景：
.overlay::before { content: ""; position: absolute; pointer-events: none; }，真实按钮保留在主 DOM 流中 - React 场景下优先用 Portal 渲染到
下，彻底脱离祖先干扰
opacity: 0 或 visibility: hidden 时仍需配 pointer-events: none
opacity: 0 只是透明，visibility: hidden 只是不可见，两者默认都照常拦截点击。要实现“看得见但点不着”，必须三者配合：
-
opacity: 0（或visibility: hidden）负责视觉隐藏 -
pointer-events: none负责事件透传
动画场景下优先选 opacity + pointer-events: none，因为 opacity 支持硬件加速，visibility 不支持过渡动画，display: none 则会触发重排且无法做 CSS 动画。
移动端与 SVG 的特殊处理
iOS Safari 在滚动容器内有时会忽略 pointer-events: none，尤其当父容器同时有 touch-action: none 时。可尝试加 will-change: transform 或 transform: translateZ(0) 缓解。
SVG 元素行为更细粒度：<svg></svg> 默认 pointer-events: auto，但内部的 <g></g> 或 <path></path> 可能被重置为 none，须显式设回 pointer-events: visiblePainted 或 auto。
最后提醒：这个属性只影响指针事件，不影响键盘焦点和屏幕阅读器。如果遮罩下有表单控件，别只靠 pointer-events: none 来“禁用”——它不改变语义，也不阻止 tab 键聚焦。
