直接给遮挡元素本身加 pointer-events: none 才能实现点击穿透，但必须精准作用于真正盖住目标的元素，而非其父级或错误节点，且需注意伪元素、svg 子元素、fixed 导航栏等易忽略遮挡源。
直接给遮挡元素本身加 pointer-events: none 就能实现点击穿透，但加错位置、DOM 层级混乱或子元素误配 auto 是 90% 失效的根源。
必须作用于真正盖住目标的那个元素
浏览器事件捕获是自顶向下走渲染树的，pointer-events: none 只对当前元素生效，不继承、不跳过、不“传染”。如果遮罩结构是 <div class="modal"><div class="mask"></div></div>，而你只给 .modal 加了 none，那 .mask 依然会拦截点击——因为它是独立的、未设 none 的渲染节点。
- 用 Chrome DevTools 的 “Rendering” 面板勾选 Hit test borders，一眼确认哪一层实际覆盖了点击坐标
- 常见被忽略的遮挡元素：伪元素（
::before/::after）、<svg></svg>内的<g></g>或<path></path>、position: fixed的导航栏 - 不要靠
z-index判断是否该加——再高的z-index，不设none仍会拦截；再低的z-index，只要没被其他元素挡住且未设none，照样响应
父设 none 后，子元素写 auto 完全无效
这是最常踩的坑：.overlay { pointer-events: none; } + .overlay .close-btn { pointer-events: auto; } 在绝大多数场景下根本不起作用。浏览器在 hit-testing 阶段就跳过了整棵子树，压根不会读取子元素的 pointer-events 值。
- 可行方案一：把按钮提为兄弟节点，例如
<div class="overlay"></div> <button class="close-btn">×</button>，再用z-index和position: absolute控制视觉层级 - 可行方案二：用伪元素模拟遮罩背景，例如
.overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); pointer-events: none; }，真实按钮保留在主 DOM 流中 - React/Vue 场景下优先用 Portal 渲染到
下，彻底脱离祖先干扰
移动端和动画中的关键时机陷阱
pointer-events: none 在 iOS Safari 和安卓 WebView 中基本可用，但失效往往不是属性本身的问题，而是时机或组合错误。
- 动画过渡中不能只在起始/结束态切
pointer-events：用opacity淡入时，若中间帧仍为auto，用户可能点中半透明状态下的遮罩——必须在动画开始前立即设none，结束回调里再切回auto或移除 - 滚动穿透不是给遮罩设
none，而是给遮罩下方的可滚动容器（如.page-content）动态加pointer-events: none - iOS Safari 旧版本对
<input>或<select></select>的穿透支持不稳定，尤其在iframe内；安卓部分 WebView（华为、小米）会忽略input[type="file"]的穿透，需 JS 临时移除 DOM
真正难的不是写上 pointer-events: none，而是确认它作用在了那个「唯一且精确」的遮挡节点上，并且整个层叠路径里没有其他 none 父级、没有意外浮出的伪元素、也没有动画中间态的漏网之鱼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
