pointer-events: none 无法禁用底层点击，因它仅跳过自身、不阻止事件透传；正确做法是设遮罩 pointer-events: auto 并用 JS 在 touchstart 和 click 中调用 stopPropagation() 与 preventDefault()。
不能靠 pointer-events: none 禁用遮罩层“下”的点击事件——它只让遮罩自己不响应，事件反而会往下透。真要禁用底层交互，遮罩必须设 pointer-events: auto，再配合 JS 阻断事件流。
为什么 pointer-events: none 无法禁用底层点击
这个属性的作用是“跳过自己”，不是“压住下面”。设成 none 后，点击会直接落到遮罩下方第一个可交互元素上，比如按钮、链接甚至 <input>。用户点遮罩空白处，结果触发了底下的跳转或表单提交，这恰恰是误用的典型表现。
- 遮罩层本身没监听任何事件，
none下touchstart和click都不会触发，你连关弹窗都做不到 - 如果遮罩下是列表项或地图，用户可能连续误触多个目标
- iOS Safari 中，
none层压着<input>可能导致软键盘根本不弹
正确做法：遮罩设 auto + JS 阻断传播
遮罩必须参与事件流，才能主动干预。核心是让它捕获事件后立刻终止冒泡，不让底层收到。
- CSS 中确保遮罩有明确定位：
position: fixed或absolute，且z-index足够高，真正在视觉和渲染树中盖住目标 - 移除所有
pointer-events: none，保持默认auto - JS 中同时监听
touchstart和click，并在两个事件里都调用event.stopPropagation()和event.preventDefault() - 避免内联写法如
ontouchstart="return false"，它无法阻止冒泡，也难调试
移动端特别要注意 touch 事件链
只处理 click 在移动端几乎无效。iOS 和多数安卓 WebView 中，touchstart 是即时触发的，而 click 有约 300ms 延迟。用户点下去的瞬间，底层元素可能已在延迟窗口内响应了。
立即学习“前端免费学习笔记（深入）”；
- 必须给遮罩加
touch-action: none，防止滚动干扰（尤其遮罩下是长列表时） - 若遮罩内含关闭按钮，该按钮需保持
pointer-events: auto，且其事件处理器里不要调用stopPropagation()，否则关不了弹窗 - 华为、小米等厂商 WebView 对
input[type="file"]的穿透控制极差，pointer-events常被忽略，此时只能 JS 临时移除遮罩 DOM
伪元素和层叠上下文是隐形坑
遮罩层里的 ::before 或 ::after 默认也会捕获事件。哪怕只是画个半透明背景，没显式设 pointer-events: none，它就可能单独吃掉一次点击，导致穿透失败或点偏。
- 检查开发者工具的 “Computed” 面板，搜
stacking context，确认遮罩父级没因transform、opacity或filter意外创建新层叠上下文，否则z-index会失效 - 别依赖
visibility: hidden或opacity: 0来隐藏遮罩——它们仍参与事件流，pointer-events: auto下照样拦截 - 动画中切换状态时，
pointer-events必须在动画开始前就设为auto，不能等到transitionend才加，否则中间帧可能漏掉事件
真正挡路的往往不是遮罩本身，而是它父容器的伪元素、未设宽高的绝对定位子节点，或者一个被 overflow: hidden 裁掉却仍在事件流中的空 <div>。真机测试时，先用开发者工具的 “Toggle element screenshot” 看热区是否真被覆盖，比反复调 z-index 有用得多。
