事件冒泡是从目标元素向父元素逐层上传的dom事件传播机制；vue3中推荐用@click.stop修饰符在模板中直接阻止，比手动调用event.stoppropagation()更简洁可靠，且不依赖dom结构、兼容portal和shadow dom。
直接在遮罩层上加 @tap.stop="closePopup" 是最稳的方案，比监听 document 点击再判断目标靠谱得多——它从源头掐断冒泡，不依赖 DOM 结构、不穿透 Portal、也不怕 Shadow DOM。
为什么 document.addEventListener('click') 经常关错弹窗
常见现象：点弹窗里的按钮、输入框、甚至遮罩层本身，弹窗也关了。这不是事件没冒泡，是你没过滤目标——event.target 可能是弹窗任意子节点，而这些节点本该“免疫”关闭逻辑。
关键不是阻止冒泡，而是精准识别“点的到底是不是空白处”。空白处 = 弹窗容器及其所有后代元素之外的区域。
-
e.composedPath().includes(popupEl)是目前最健壮的判断方式，能穿透 Shadow DOM 和 Portal 渲染场景 - 降级可用
e.target.closest('.popup-wrapper')，但不适用于自定义元素或 Web Component 内部 - 绝对不要用
e.target === document.body或递归查parentElement，容易漏判或误判
@tap.stop 是 uni-app 里最推荐的拦截方式
@tap 是 uni-app 跨平台手势统一入口，iOS、小程序、H5 行为一致；@click 在部分 iOS Safari 或微信小程序里可能延迟或不触发。
错误写法：<view><view></view></view> → 点子元素仍会冒泡触发关闭
正确写法：<view><view></view></view> → 子元素点击不会影响父层
- 如果弹窗内容区需要滚动，别给整个弹窗容器加
@touchmove.stop.prevent，否则内部滑动失效 - 遮罩层必须设
position: fixed或absolute，且z-index足够高（尤其防被cover-view、video等原生组件穿透） - 底层页面必须禁用交互：推荐动态加类
mask-active，配合 CSS：.mask-active .page-content { pointer-events: none; }
uni-popup 组件怎么配才不误关
如果你用的是 uni-popup 官方组件，别只靠 is-mask-click 开关，它控制的是蒙层是否可点击，但不解决子元素误触发问题。
- 遮罩层上显式写
@tap.stop="closePopup"，哪怕is-mask-click为 true - 确保 ref 绑定正确，调用
this.$refs.popup.close()前检查是否存在 - 关闭动画未完成时，避免快速重复打开，可用
v-if控制 DOM 销毁重建，或监听change事件做状态锁
真正容易被忽略的不是事件怎么写，而是遮罩层有没有真正盖住、底层有没有真正失焦——样式和交互必须同步生效，缺一不可。
