必须加在真正遮挡的元素上；若加在父容器如.dialog而非.mask，浏览器会跳过整棵子树检测，导致穿透失效，应使用devtools“hit test borders”确认实际覆盖层。
pointer-events: none 必须加在真正遮挡的元素上
点击穿透失效，八成是因为样式写错了位置。比如遮罩是 .mask，你却把 pointer-events: none 加在它的父容器 .dialog 上——浏览器根本不会检测 .mask 是否参与事件，它已经被祖先跳过了。用 Chrome DevTools 的 “Rendering” 面板勾选 “Hit test borders”，一眼就能看出哪一层实际盖住了目标区域。
常见遮挡元素包括：position: absolute、position: fixed、float 元素，以及 SVG 中的 <g></g> 或 <path></path>（它们默认可能被重置为 pointer-events: none）。
父设 none 后，子元素写 auto 也无效
这是最常踩的坑：给遮罩容器设了 pointer-events: none，再给里面的关闭按钮写 pointer-events: auto，结果按钮点不动。原因很直接——浏览器在 hit-testing 阶段就跳过了整个子树，压根不往下查子元素的值。
- 错误结构：
<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 流中
opacity: 0 或 visibility: hidden 时仍需配 pointer-events: none
很多人以为 opacity: 0 就等于“不可点”，其实不然——它只是透明，事件照常拦截。同样，visibility: hidden 的元素仍占位、仍响应 click。要真正实现“看得见但点不着”，必须三者配合：
-
opacity: 0（或visibility: hidden）负责视觉隐藏 -
pointer-events: none负责事件透传 - 动画场景下优先选
opacity+pointer-events: none，因为opacity支持硬件加速，visibility不支持过渡动画
注意：display: none 虽然彻底移除交互，但会触发重排，且无法做平滑显隐动画。
移动端与 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 或 fill，需单独检查并显式设回 pointer-events: visiblePainted 或 auto。
IE11 对 HTML 元素的 pointer-events 支持不完整，若需兼容，表单类元素（如 <button></button>）建议降级用 display: none + JS 模拟显隐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
