直接给真正遮挡目标的元素本身加 pointer-events: none 才能实现点击穿透；加错位置（如父容器）、忽略伪元素或 SVG 子节点、未控好动画时机、父设 none 后子设 auto 无效，是常见失效原因。
直接给遮挡元素本身加 pointer-events: none 就能解决穿透，但 80% 的失败是因为加错了位置、没处理子元素继承、或动画时机失控。
为什么加了 pointer-events: none 还点不透？
最常见原因是：它没加在真正盖住目标的那层 DOM 元素上。比如遮罩是 .mask，你却把样式写在它的父容器 .modal 上——浏览器压根不会去检查 .mask 的事件属性，因为捕获阶段早就跳过了整棵子树。
- 用 Chrome DevTools 的「Rendering」→ 勾选
Hit test borders，看实际覆盖点击坐标的到底是哪一层 - 检查伪元素：
.mask::before或.mask::after若存在且未设pointer-events: none，照样独立拦截点击 - 确认遮罩元素有
position: fixed或position: absolute，否则可能因层叠上下文没真盖住底层
遮罩里有关闭按钮，怎么让它可点？
不能靠“父设 none + 子设 auto”来救——这是规范行为，不是 bug。父级为 none 时，子元素的 pointer-events: auto 完全无效。
- 把按钮移出遮罩 DOM 树：
<div class="overlay"></div><button class="close-btn">×</button>，再用z-index和position: absolute控制视觉层级 - React/Vue 中优先用 Portal 渲染到
<body>下，彻底脱离祖先干扰 - 若必须保留在遮罩内，只对非按钮区域设
pointer-events: none，按钮所在区域用额外容器或伪元素隔离（如.mask-bg设none，.close-btn单独定位）
移动端动画中 pointer-events 切换时机怎么控？
用 opacity 做淡入淡出时，如果只在初始和结束态切 pointer-events，中间过渡帧仍为 auto，用户就可能点中半透明状态下的遮罩。
立即学习“前端免费学习笔记（深入）”；
- 动画开始前立即设
pointer-events: none（JS 中用element.classList.add('is-fading')触发） - 动画结束回调（
transitionend或animationend）里再切回auto或移除该声明 - 避免和
visibility: hidden混用——它不影响事件流，加了也白加；display: none虽天然禁用交互，但无法做 CSS 动画
iOS Safari 和安卓 WebView 的兼容差异
两者都支持 pointer-events: none，但边界行为不同：
- iOS Safari：对
touchstart/touchend生效，但 Safari 15.4 之前不支持与touch-action协同；若none层下压着<input>，旧版可能连软键盘都不弹 - 安卓 WebView：偶有不稳定，尤其对
position: sticky或<iframe>内元素；部分厂商浏览器（如华为、小米）会忽略none对input[type="file"]的穿透 - 通用建议：搭配
touch-action: none防止滚动干扰；微信内置浏览器建议加空<div>做透传代理；真机必测
最容易被忽略的，是浮层 DOM 结构本身——它是否真的在渲染树中盖住了目标，而不是靠 z-index“看起来盖住了”。pointer-events 不看视觉，只看命中测试路径。
