pointer-events: none 是命中测试阶段的硬跳过，使元素及子树彻底不参与事件分发；子元素设 auto 无效，穿透由层叠顺序决定，伪元素需单独设置，移动端支持受限，真机必测。
pointer-events: none 是浏览器事件捕获阶段的“硬跳过”
它不是让元素“不响应点击”，而是让浏览器在 hit-testing（命中测试）阶段就彻底忽略该元素及其整个子树——事件不会捕获、不会冒泡、event.target 甚至都捕获不到它。真正起作用的是渲染树的自顶向下遍历逻辑，只要某层设了 pointer-events: none，后续所有子节点（无论写没写 pointer-events: auto）都不会进入事件分发流程。
常见错误：以为给父容器加 pointer-events: none 后，再给子按钮加 pointer-events: auto 就能恢复点击。实际是徒劳——浏览器压根没走到那棵子树。
穿透目标由层叠顺序和 DOM 位置共同决定
事件不会“随机落到最底下”，而是按层叠上下文（stacking context）和 z-index 排序后，从上到下找第一个 pointer-events: auto 的可交互元素。如果遮罩层没定位（position: static），或被其他层叠上下文打断（比如父级有 opacity: 0.99 或 transform），它可能根本不在事件路径上，加了 pointer-events: none 也无效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须确保遮挡元素本身有
position: absolute或position: fixed - 伪元素（如
::before）需单独设pointer-events: none，否则它会独立拦截 - 用 Chrome DevTools 的 “Rendering” → “Hit test borders” 可直观验证哪一层真正在覆盖
移动端穿透失效的三大典型场景
iOS Safari 和部分安卓 WebView 对 pointer-events: none 的支持边界比桌面端更窄，尤其在 touch 事件链中：
-
input[type="file"]在华为、小米等厂商 WebView 中常忽略pointer-events: none，需 JS 临时移除 DOM - Safari 15.4 之前不支持
pointer-events: none与touch-action: none协同，滚动穿透需额外处理 - 动画过渡中若只在首尾切
pointer-events，中间帧仍为auto，用户可能点中半透明遮罩下的按钮
真机必测，微信内置浏览器建议用空 <div> 做透传代理，而非依赖单一 CSS 属性。
<h3>别混淆视觉隐藏和事件禁用</h3>
<p><code>opacity: 0 或 visibility: hidden 不等于点击禁用——它们只是视觉不可见/透明，事件照常触发。要实现“看得见但点不着”，必须三者配合：
-
opacity: 0（或visibility: hidden）负责视觉状态 -
pointer-events: none负责事件透传 - 动画时，
pointer-events: none必须在 opacity 动画开始前同步设置，结束回调里再恢复
最容易被忽略的是：DOM 结构里那个“真正盖住目标”的元素，可能不是你直觉认为的那个 class，而是它的某个伪元素、兄弟节点，或是父级创建的层叠上下文边界。
