h5端多层弹窗点击穿透难搞，因ios safari中事件流与渲染层分离：transform使pointer-events: none失效；@tap.stop需每层遮罩独立绑定；v-if替代v-show；page-meta锁body滚动最稳；z-index须隔离堆叠上下文且禁用默认transform动画。
为什么H5端多层弹窗点击穿透特别难搞
因为H5在移动端浏览器（尤其是iOS Safari）里，事件流和渲染层是两套独立机制：遮罩层视觉上盖住了，但pointer-events: none在含transform的父容器下会失效；而多层弹窗叠加时，@tap.stop只拦当前层，上层弹窗关闭瞬间，下层弹窗还没完全渲染完成，事件就“漏”到最底层去了。
@tap.stop必须写在每层弹窗的遮罩上，不能只靠最外层
很多人以为给最外层view加一次@tap.stop就够了，实际不行。每层弹窗的遮罩都得独立绑定事件，否则关闭上层后，下层遮罩还没接管事件流，点击就会穿透。
- 错误写法：
<view><u-popup v-model="showA">...</u-popup><u-popup v-model="showB">...</u-popup></view> - 正确写法：每个
u-popup都显式配置mask-click或手动绑定遮罩@tap.stop，比如：<u-popup :mask-click="false"></u-popup>，再在closeA里调用e.stopPropagation() - 如果用的是自定义弹窗组件，确保其遮罩
view上有@tap.stop，且不依赖v-show——改用v-if，避免隐藏状态下仍监听事件
用page-meta配合overflow: hidden才是H5端最稳的兜底方案
H5端无法像App那样靠原生层拦截，必须从页面滚动容器本身下手。仅靠CSS禁用pointer-events不可靠，但page-meta能直接控制body滚动行为，且iOS Safari支持良好。
- 在根
template里加上：<page-meta :page-style="'overflow:' + (popupStack.length > 0 ? 'hidden' : 'visible')"></page-meta> -
popupStack是一个数组，每次打开弹窗push一个标识，关闭时pop，长度>0就锁滚动 - 注意：
page-meta一个页面只能有一个，别在子组件里重复声明 - 这个方案不影响弹窗内部
scroll-view滚动，只禁用body级滚动，比@touchmove.stop.prevent更干净
z-index不是越高越好，多层弹窗必须隔离堆叠上下文
很多穿透问题其实不是事件没拦住，而是遮罩根本没盖住目标元素——因为父容器用了transform或opacity，创建了新的堆叠上下文，导致子元素的z-index只在该上下文内生效。
- 检查所有弹窗父容器是否含
transform、opacity 、<code>will-change等属性，有就去掉或用translateZ(0)强制提升层级 - 每层弹窗遮罩自身必须设
position: fixed或absolute，且z-index明确大于前一层（比如1000、2000、3000），不能依赖继承 - 特别注意
uni-app默认动画（如fade、slide）会自动加transform，建议关闭动画或用transition替代
transform和pointer-events的组合渲染缺陷，在模拟器里永远复现不出来。多层弹窗的穿透往往只发生在快速连续打开/关闭的间隙，必须用真机反复点按验证。
