遮罩层点击后底层按钮仍触发，根本原因是ios safari等平台对pointer-events: none支持不稳定且事件冒泡未阻断，需绑定@tap并调用e.stoppropagation()、避免简写@click、禁用body子元素pointer-events、拦截@touchmove.stop.prevent并及时恢复overflow。
遮罩层点击后底层按钮仍触发？先堵住事件冒泡
这不是样式没盖住，而是点击事件“溜”过去了。ios safari 和部分安卓 webview 对 pointer-events: none 支持不稳定，光靠 css 层级（z-index）根本拦不住事件流。
- 遮罩层必须绑定
@tap或@click，哪怕只是空函数，否则 iOS 下可能完全不捕获 touch 事件 - 在事件处理函数里务必调用
e.stopPropagation()—— 注意不是preventDefault()，后者对点击穿透基本无效 - 避免在遮罩层上写
@click="showMask = false"这种简写，它不显式调用 stopPropagation，某些平台会穿透 - 如果用的是
u-popup、uni-popup等封装组件，检查其是否暴露了mask-click或closeOnClickMask类似开关，优先开启并确认内部已做 stopPropagation
为什么 pointer-events: none 在 iOS 上经常失效？
iOS Safari ≤16.6 存在已知渲染缺陷：当遮罩层父容器含有 transform（比如 translateY(0)、translateZ(0)）或 will-change: transform 时，子元素的 pointer-events: none 可能被忽略——而 uni-app 的弹窗动画默认就依赖这类 transform，导致遮罩“视觉可见但逻辑透明”。
- 不要给遮罩层本身加
pointer-events: none，它本该响应点击；要禁用的是底层内容 - 若需临时禁用页面交互，更可靠的做法是：遮罩显示时，给
body或根容器加类名，例如.mask-active，再通过 CSS 控制其子元素：
.mask-active * { pointer-events: none !important; }
注意加 !important，且确保该类名在遮罩关闭后及时移除。
滚动穿透比点击穿透更隐蔽？用 @touchmove.stop.prevent 直接截断
用户一滑遮罩层，整个页面跟着滚——这说明 touchmove 事件没被拦截。仅靠 overflow: hidden 在某些机型（尤其微信小程序）上会失效或引发回弹抖动。
- 最稳方案：在遮罩层外层容器（通常是页面根
<view></view>）绑定@touchmove.stop.prevent - 不需要写函数体，修饰符本身就能阻止默认滚动和冒泡
- 别只给遮罩层加，它可能没占满全屏；必须作用于包裹全部可滚动内容的父节点
- 如果用了
u-scroll-view或自定义滚动容器，也要单独给它加@touchmove.stop，否则滚动仍会从它透出
遮罩关闭后页面还不能滚？记得还原 body.style.overflow
很多项目只记得打开 overflow: hidden，却忘了关。结果是遮罩没了，但页面永远卡死——尤其 H5 环境下，document.body.style.overflow 是全局状态，不会自动恢复。
- 推荐用
watch监听遮罩显示状态变量（如showMask），而非在关闭方法里手动设auto - 还原时不要写
'auto'，直接赋空字符串''，让它回退到 CSS 原始值，避免覆盖开发者自定义的scroll或overlay - 小程序平台不支持操作
body样式，此时应改用page-container或自定义滚动区域的 class 控制
iOS 的事件穿透问题从来不是单一原因，它常是事件流 + 渲染层 + 平台 Bug 三者叠加的结果。最易忽略的是：你以为加了 z-index 就万事大吉，其实 Safari 根本没把你的 mask 当作事件接收者。动手前，先打开 Safari 开发者工具，点开「Events」面板，看点击时到底哪些节点收到了 touchstart——真相永远在事件路径里。
