移动端点透是指上层弹窗视觉隐藏但未移除DOM时，点击事件穿透至下层可点击元素触发意外操作；本质是300ms延迟下click冒泡到已隐藏区域的底层元素所致。
什么是移动端点透？
点透是 iOS Safari 和部分 Android WebView 中特有的交互 bug：上层弹窗（如 modal、toast）用 opacity: 0 或 visibility: hidden 隐藏但未真正移除 DOM，用户点击该区域时，事件会“穿透”到下层可点击元素（比如背后的按钮或链接），触发意外跳转或操作。它和 z-index 无关，本质是事件冒泡 + 渲染层叠加异常。
为什么不能只靠 pointer-events: none
pointer-events: none 确实能阻止点击，但它会让整个元素完全失焦——你无法再用 JS 监听 click、touchstart，也失去 :hover / :active 状态反馈。真实场景中，遮罩层常需支持「点击遮罩关闭弹窗」，所以必须保留事件能力，只是隔离穿透。
- ❌ 错误做法：
.modal-overlay.is-hidden { pointer-events: none; }→ 关闭逻辑失效 - ✅ 正确思路：隐藏视觉，但保持事件捕获能力，同时阻断向下的传播
@mixin prevent-tap-through 的标准写法
核心是两层控制：CSS 层用 pointer-events: auto + touch-action: manipulation 保证本层响应；JS 层在显示/隐藏时动态加/删 is-tap-blocked 类，并监听 touchend 阻止默认行为。SCSS 只负责样式兜底：
@mixin prevent-tap-through {
// 视觉隐藏但保留事件捕获
opacity: 0;
visibility: hidden;
// 强制本层拦截 touch 事件（尤其 iOS）
touch-action: manipulation;
// 防止子元素意外触发穿透（如内部按钮没禁用）
> * {
pointer-events: none;
}
// 恢复本层点击能力（关键！）
&.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
- 必须配合 JS 在弹窗 show 时加
is-active，hide 时移除 —— 单靠 CSS 无法解决点透 -
touch-action: manipulation是 iOS 的关键开关，缺了它，pointer-events: auto在某些 WebView 下仍可能失效 - 别用
display: none替代visibility: hidden：前者彻底移除渲染树，pointer-events失效，且 transition 不生效
容易被忽略的兼容性细节
点透不是所有设备都一样表现。iOS 15+ 对 opacity: 0 的穿透更敏感，而某些 Android 旧版 WebView 要求同时设置 will-change: opacity 才能稳定拦截。实际项目中建议：
- 对
.modal-overlay这类全局遮罩，直接在基础样式里写死@include prevent-tap-through - 避免在
@media (hover: hover)下覆盖该 mixin —— 移动端无 hover，覆盖后反而暴露问题 - 如果用了第三方弹窗库（如 Element Plus、Ant Design Vue），检查其是否已内置该逻辑；若没写，优先 patch 而非重写
点透问题从来不是纯 CSS 能闭环的，SCSS mixin 只负责提供可复用、不污染业务逻辑的样式基底。真正稳的方案，永远是 CSS + JS 协同拦截 —— 少一个环节，上线后就可能被用户点穿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
