移动端点击穿透根源是遮罩层默认pointer-events: auto未阻断事件流，导致touchstart冒泡至底层元素；正确解法是给遮罩本身设pointer-events: none实现透传，但需确保其真正覆盖目标且无层叠上下文干扰。
移动端点击穿透的根源不是遮罩没盖住，而是事件没被真正拦截
很多开发者以为遮罩层 z-index 够高、position: fixed 用得对，就能拦住点击——结果 iOS Safari 里一点就穿到下层按钮。这不是渲染问题，是浏览器事件分发机制没切断：默认 pointer-events: auto 下，遮罩虽在视觉顶层，但不显式阻断，touchstart 就会冒泡到底层可交互元素。
常见错误现象包括：遮罩显示后点空白处却触发了下方列表项的跳转；加了 preventDefault() 或 stopPropagation() 仍无效；iOS 上软键盘不弹出（因为 input 被 none 层压住了）。
- 别依赖
visibility: hidden或opacity: 0隐藏遮罩后再显示——它们仍参与事件流 - 不要只靠
z-index拼数值，先检查父级是否意外创建了层叠上下文（比如transform、opacity） - 移动端必须真机测试：iOS Safari 对
pointer-events: none在滚动容器内的响应有延迟，尤其配合overflow: scroll时
让遮罩“视觉存在但事件透明”的正确写法
想实现水印、加载蒙层、高亮提示这类“看得见但点不着”的效果，核心就是给遮罩设 pointer-events: none。它不改变 DOM 结构、不影响渲染、也不干扰键盘焦点，只让鼠标和 touch 事件直接透传到下层最近的、pointer-events 不为 none 的元素。
示例：
.popup-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
pointer-events: none; /* ✅ 点击穿透关键 */
}
此时点击遮罩任意位置，实际触发的是 <button></button> 或 <a></a> 的 click。
-
pointer-events: none对touchstart/touchend同样生效（Safari 15.4+ 支持协同touch-action） - 它不影响子元素继承——所以如果遮罩里有关闭按钮，必须单独设
pointer-events: auto - 避免用
transition动画切换pointer-events值，部分安卓 WebView 会卡在中间态导致事件丢失
局部交互怎么办？比如遮罩上的 × 关闭按钮
整个遮罩要穿透，但右上角那个 × 必须能点——不能只在父层设 pointer-events: none 就完事。子元素不会自动“抢回”事件权，必须显式声明。
结构示例：
<div class="popup-overlay"> <button class="close-btn">×</button> </div>
CSS 写法：
.popup-overlay { pointer-events: none; }
.close-btn { pointer-events: auto; }
- 注意：IE11 不支持非 SVG 元素上的
pointer-events，如需兼容，得用 JS +z-index分离图层 - 如果遮罩内含表单控件（如
<input>），别对父层设none再试图用子元素恢复——<input>本身不支持子元素重获焦点，得换方案（比如把 input 提到遮罩外） - 多个绝对定位元素堆叠且都设
none时，事件穿透顺序按渲染树绘制顺序（paint order），不是 DOM 顺序，真机调试时用开发者工具的“Layers”面板看实际绘制层
为什么有时 pointer-events: none 不生效？
最常被忽略的是层叠上下文干扰。比如遮罩父容器用了 transform: translateZ(0) 或 opacity: 0.99，就会创建新层叠上下文，导致遮罩的 z-index 只在局部有效，视觉上根本没盖住目标元素——再怎么设 pointer-events 都白搭。
- 用浏览器 DevTools 的“Computed”面板逐级检查祖先元素，找是否有触发层叠上下文的属性（
transform、filter、will-change、opacity ） - 若必须保留这些样式，就把遮罩元素提到
直接子级，用position: fixed+ JS 动态计算位置 - 慎用
transform-style: preserve-3d，它会让 z-index 行为异常，看起来像被压在底下，其实是 3D 渲染顺序错乱
真正容易被忽略的是：当你需要“点遮罩空白处关闭弹窗”，pointer-events: none 就不适用——因为它让遮罩彻底不可点。这时必须用 pointer-events: auto + JS 判断 event.target === overlay，再手动关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
