加了 pointer-events: none 还点不透，核心原因是未作用于真正遮挡目标的 dom 层；伪元素、层叠上下文、ios safari 兼容性及父设 none 后子 auto 无效等均会导致穿透失效。
pointer-events: none 是解决定位元素遮挡点击的直接手段，但它只在加对位置、控好层级、避开移动端陷阱时才真正生效。加错一层、漏一个伪元素、动画切晚一帧，穿透就失效。
为什么加了 pointer-events: none 还点不透？
核心原因几乎总是：没加在真正盖住目标的那层 DOM 元素上。
- 遮罩是
.mask，你却给它的父容器.modal加了pointer-events: none→ 浏览器根本不会检查.mask的事件属性，捕获阶段已跳过整棵子树 - 遮罩用了
::before或::after画背景，但没单独设pointer-events: none→ 伪元素默认参与事件流，独立吃掉点击 - 遮罩有
position: absolute，但父级带transform或opacity: 0.99→ 创建了新层叠上下文，视觉覆盖 ≠ 事件覆盖 - 目标是
<input type="text">，iOS Safari 15.4 之前版本对pointer-events: none+<input>组合支持异常，软键盘可能不弹
如何确保穿透只作用于遮挡层，不影响内部按钮？
不能靠“父设 none + 子设 auto”来救——这是 CSS 规范行为，不是 bug。父级为 none 时，子元素的 pointer-events: auto 完全无效。
- 把关闭按钮提为遮罩的兄弟节点：
<div class="overlay"></div> <button class="close-btn">×</button>，再用z-index和position: absolute控制视觉层级 - React/Vue 中优先用 Portal 渲染到
下，彻底脱离祖先干扰 - 若必须保留在遮罩内，只对非按钮区域设
pointer-events: none，例如用.mask-bg承载背景，.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 对滚动容器（
overflow: scroll）内的pointer-events: none响应有延迟，真机测试必做
最易被忽略的是：穿透目标不是“最底层”，而是 z-index 紧邻下一层；中间若有任意一层未设 pointer-events: none，事件就在那里被拦住。别依赖 DevTools 模拟器，iOS 和安卓 WebView 在 <input type="file">、touch-action 协同等场景下表现差异极大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
