事件冒泡本身不会让“点击别处关闭”失效，真正原因是误用冒泡机制：如弹窗内部元素未隔离、document监听未判断target。常见失效是关闭后冒泡触发父级打开逻辑或重复关闭；解法一是内部元素调用e.stopPropagation()，二是document监听+popup.contains(e.target)判断外部点击。
事件冒泡本身不会让“点击别处关闭”功能失效，真正导致失效的是对冒泡机制的误用或忽略——比如在弹窗内部元素上没做隔离，或在 document 级监听中没正确判断点击来源。
为什么“点别处关闭”会意外失效
常见失效场景是：用户点关闭按钮（×），弹窗一闪就又打开。这不是功能坏了，而是关闭动作刚执行完，冒泡上去触发了外层“点哪都关”的逻辑，或者更典型的是——触发了父容器的“点一下就打开”的监听器。
- 弹窗遮罩层（.mask）绑了 click 关闭逻辑，但关闭按钮（.close）是它的子元素；点 × 时，先执行关闭，再冒泡到 .mask，又触发一次关闭（看似没反应，实则重复执行）
- 整个卡片区域（.card）绑了 click 打开弹窗，而 .close 按钮在 .card 内部；点 × 后冒泡到 .card，立刻重新 show 弹窗
- 监听写在 body 或 document 上，但没检查 e.target，导致点弹窗内部任意位置都被当成“点外面”，直接关掉
怎么用 stopPropagation 隔离内部操作
给所有弹窗内需要响应点击、但又不该触发关闭的元素加 e.stopPropagation()，是最轻量、最可控的解法。
- 关闭按钮、确认按钮、输入框、下拉菜单等交互元素，都应在 click 处理函数第一行写 e.stopPropagation()
- 必须用 addEventListener 绑定，才能拿到事件对象 e；避免 onclick="hide()" 这类内联写法
- 示例：
document.querySelector('.popup .close').addEventListener('click', e => {<br> e.stopPropagation();<br> hidePopup();<br>});
怎么靠冒泡本身实现“点别处关闭”
不靠遮罩层监听，而是利用冒泡终点——在 document 上监听 click，再反向判断是否点在弹窗“里面”。这是更健壮的设计，天然免疫内部点击干扰。
立即学习“Java免费学习笔记（深入）”；
- 监听 document.click，而不是 mask.click 或 body.click
- 在 handler 中用 !popup.contains(e.target) 判断是否点在弹窗外部（popup 是弹窗根元素）
- 注意：popup 包含遮罩层和内容区；如果弹窗是动态插入的，确保监听时机在它挂载之后
- 示例：
document.addEventListener('click', e => {<br> if (!document.getElementById('popup').contains(e.target)) {<br> hidePopup();<br> }<br>});
框架里要特别注意状态与事件同步
Vue/React 中失效往往不是冒泡问题，而是状态更新没驱动视图重绘，或新节点没绑定事件。
- Vue：关闭按钮在 v-if 重建后，需确保事件监听器重新绑定；优先用 @click.stop="hide"（.stop 就是 stopPropagation 的语法糖）
- React：setState 更新 visible 后，DOM 可能还没刷新；关闭逻辑应基于最新状态，不要依赖 DOM 查询结果
- uni-app 等跨端框架：部分平台对 document.click 支持弱，可降级监听 body 或使用 ref + contains 判断
