嵌套弹出层点击误触外层关闭的根本原因是事件冒泡，应使用event.stoppropagation()在子层可交互元素的事件处理器中精准拦截冒泡，而非在外层遮罩上使用；需区分stoppropagation（阻断传播）与preventdefault（阻止默认行为）。
嵌套弹出层（比如一个模态框里再打开一个下拉菜单或子弹窗）点击时容易误触外层，导致整个弹窗意外关闭。根本原因是事件冒泡——点击子元素会一路向上触发父级的 click 监听器。用 event.stopPropagation() 可以精准切断冒泡链，只让当前层响应，不干扰外层。
什么时候必须用 stopPropagation
以下情况不加它，交互几乎不可用：
- 外层是遮罩层（mask）+ 弹窗容器，点击遮罩关闭弹窗；内层有按钮、下拉、开关等可点击区域
- 多级下拉菜单：一级菜单展开后，点击二级项本该选中，结果却收起了整个菜单
- 编辑态弹窗中嵌套富文本工具栏，点加粗按钮时触发了弹窗关闭
正确写法：只在需要拦截冒泡的 handler 里调用
不是所有点击都要阻止冒泡，关键看谁“拥有这次点击”。通常只在子弹层内部的可交互元素上加：
// ✅ 正确：在子弹层按钮上阻止冒泡
document.querySelector('.child-popup .confirm-btn').addEventListener('click', function(e) {
e.stopPropagation(); // 切断向上冒泡，外层 click 不会执行
doConfirm();
});
// ❌ 错误：在外层遮罩的关闭逻辑里阻止
document.querySelector('.mask').addEventListener('click', function(e) {
e.stopPropagation(); // 没意义，这里本来就是最外层
closeAllPopups();
});
注意 stopPropagation 和 preventDefault 的区别
这两个常被混淆，但作用完全不同：
- stopPropagation()：阻止事件向父元素传播，不影响默认行为（比如链接跳转、表单提交照常发生）
- preventDefault()：阻止元素默认行为（如 a 标签跳转、表单提交），但事件仍会冒泡
处理弹窗点击冲突，99% 只需 stopPropagation。除非你同时想禁用某元素的默认动作（比如点击 checkbox 不打勾），才考虑加 preventDefault。
更健壮的方案：配合事件委托和 class 判断
如果弹层是动态生成的，或结构较复杂，光靠 stopPropagation 可能漏控。建议结合 class 名做主动过滤：
document.addEventListener('click', function(e) {
// 点击的是遮罩层或弹窗容器本身 → 关闭
if (e.target === document.querySelector('.mask') ||
e.target.closest('.popup-wrapper')) {
return; // 不关闭，可能是点到了内部
}
// 点击的是遮罩以外区域 → 关闭所有
if (!e.target.closest('.popup')) {
closeAllPopups();
}
});
这样即使忘了某个按钮加 stopPropagation，也能靠判断兜底，避免闪退。
