pointer-events: none 是事件穿透的直接开关，不是视觉遮盖的替代品；它在 hit-testing 阶段硬性跳过元素，阻断捕获与冒泡，使 event.target 不会落于其上，而 opacity: 0 或 visibility: hidden 仅视觉隐藏，事件仍正常穿透。
pointer-events: none 是事件穿透的直接开关，不是视觉遮盖的替代品
移动端点击穿透的根本原因不是“没盖住”，而是事件流没被切断。pointer-events: none 是浏览器在 hit-testing 阶段就跳过该元素的硬性指令——它不参与捕获、不触发冒泡、连 event.target 都不会落到它身上。这和 opacity: 0 或 visibility: hidden 完全不同：后者只是视觉隐藏，事件照常穿透 DOM 树并命中底层元素。
常见误判：z-index 再高、position: fixed 再稳，只要没关掉 pointer-events，点击依然会“透”。真正起作用的从来不是层叠顺序，而是事件分发路径是否被显式截断。
为什么不能只靠 touchstart.preventDefault()？
iOS Safari 和多数安卓 WebView 中，touchstart.preventDefault() 只能阻止默认行为（如滚动），但无法阻断后续的 click 事件派发。而 click 有约 300ms 延迟，在这期间若遮罩层被移除或隐藏，click 就会自然落到下层元素上。
pointer-events: none 的优势在于它作用于事件捕获阶段之前，不依赖 JS 执行时机，也不受 300ms 延迟影响。只要样式生效，浏览器立刻跳过该节点，无论它是否 visible、是否在 viewport 内。
- 只监听
touchstart或只加preventDefault()无法覆盖click阶段 -
pointer-events: none对touchend和click同时生效（Safari 15.4+ 支持完整链路） - 部分厂商 WebView（如华为、小米）对
input[type="file"]的none处理不稳定，需 JS 临时移除 DOM
父设 none 后子元素 pointer-events: auto 无效是规范行为，不是 bug
这是最容易踩坑的地方：.overlay { pointer-events: none; } + .close-btn { pointer-events: auto; } 不起作用，因为浏览器在 hit-test 阶段就跳过了整个 .overlay 子树，根本不会读取子元素的 pointer-events 值。
正确做法只有两种：
- 把可点击元素（如关闭按钮）移出遮罩层 DOM 树，例如用 Portal 渲染到
下，再靠z-index和position: absolute控制视觉层级 - 只对遮罩层中「非按钮区域」设
pointer-events: none，按钮所在区域保持auto——需用伪元素或额外容器隔离，不能靠嵌套结构
别试图用 position: absolute 把按钮“视觉浮出”——DOM 里它还是子节点，照样被父级 none 拦截。
动画过渡中 pointer-events 切换必须与 opacity 同步
用 opacity 做淡入淡出时，如果只在初始态写 opacity: 0; pointer-events: none，结束态写 opacity: 1; pointer-events: auto，中间过渡帧可能残留 pointer-events: auto，用户就会点中半透明状态下的元素。
必须用 CSS 动画或 JS 回调精准控制：
- 动画开始前立即设
pointer-events: none - 动画结束后回调里再切回
auto或移除该声明 - 避免和
visibility: hidden混用——它不影响事件流，加了也白加
真实项目里最常被忽略的，是浮层 DOM 结构和祖先节点的状态：你以为只改了一个 class，其实整个子树已被浏览器跳过命中测试，连 event.target 都捕获不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
