移动端点击穿透本质是事件延迟与dom变更时机错配，非css定位导致；核心在于touchend后立即移除遮罩，而click约300ms后触发，此时遮罩已不存在，事件落到底层元素。
移动端点击穿透不是定位导致的，是事件延迟+DOM变更时机错配
“CSS定位导致点击穿透”这个说法本身有误导性。position: absolute 或 fixed 本身不会引发穿透；真正出问题的是：你在 touchend 中立刻隐藏/移除遮罩层，而浏览器约 300ms 后才派发 click，此时遮罩已不存在，click 就落到了底层元素上。
常见错误现象：
- 点关闭按钮后，背后按钮被触发（哪怕遮罩明明盖住了它）
-
display: none或visibility: hidden后再显示，穿透依旧存在 - iOS Safari 中尤其稳定复现，Chrome DevTools 里却完全不触发
关键点：
- 穿透发生在
click阶段，不是touchstart/touchend - 定位只是让遮罩“视觉上覆盖”，但没控制事件流——这得靠
pointer-events和 JS 配合 - 只设
position: relative或调z-index不能解决穿透，只能改善是否“点得到”
pointer-events: none 是最危险的误用
很多人一听说“遮罩要拦截点击”，第一反应是给遮罩加 pointer-events: none。这是反效果的：它让遮罩彻底退出事件系统，你连点它关闭都做不到，所有点击直接透到下层。
正确做法是保持 pointer-events: auto（默认值），再用 JS 控制事件走向：
- 监听
touchstart和click两个事件（不能只靠click） - 在
touchstart中立即调用event.preventDefault()+event.stopPropagation() - 避免内联写法如
ontouchstart="return false"，容易漏掉click的处理
注意：pointer-events: none 下，:hover、:active 全失效，且子元素设 auto 也无效——父级为 none，整棵子树被跳过。
遮罩层必须真正覆盖目标区域，否则 z-index 再高也没用
即使写了 z-index: 9999，如果遮罩层没在正确的层叠上下文中，它依然可能被伪元素、transform 父容器或 clip-path 意外降级。
验证是否真覆盖：
- 用 Chrome DevTools 的 **Rendering → Show layer borders** 查看遮罩是否在独立图层且层级高于目标
- 用
getBoundingClientRect()打印遮罩和底层按钮的坐标，确认它们重叠 - 检查是否有
::before/::after覆盖在遮罩上方（它们默认也在同层叠上下文中）
特别注意：如果遮罩父容器有 overflow: hidden 或 transform，它会创建新层叠上下文，此时遮罩的 z-index 是相对于该父容器计算的，不是全局。
React/Vue 中动态切换 pointer-events 容易踩的坑
在框架中通过状态控制类名或内联样式时，容易忽略渲染时机与事件周期的错位：
- 不要这样写：
style={{ pointerEvents: isHidden ? 'none' : 'auto' }}—— 动画过渡中属性可能未及时生效，且和 CSStransition冲突 - 推荐用 class 切换：
className={`overlay ${isHidden ? 'is-hidden' : ''}`}，配合 CSS：.is-hidden { pointer-events: none; } - 注意：React 合成事件冒泡路径不受
pointer-events影响；只要点击最终命中某个有监听器的父节点，事件仍会触发
最隐蔽的问题是：你以为加了 pointer-events: none 就能阻止父组件 onClick，其实只要父组件自身可 hit-test，它依然会收到事件——pointer-events 控制的是初始目标计算，不是冒泡开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
