嵌套弹窗点击内层意外关闭外层，本质是事件冒泡未被阻止；应在内层弹窗内容区绑定click事件并调用stopPropagation()拦截冒泡，优先于子元素逐个处理或捕获阶段监听。
嵌套弹窗点击内层却意外关闭外层，本质是事件冒泡没被拦住。用 stopPropagation() 在内层弹窗的点击事件里阻止冒泡，就能让外层弹窗“感觉不到”这次点击，自然不会关闭。
为什么点内层会关外层？
浏览器默认行为：点击内层元素时，事件会从内向外逐级向上触发（冒泡）。如果外层弹窗的遮罩层或容器绑了 click 关闭逻辑，而你又没在内层阻止传播，那一次点击就会先触发内层处理，再一路冒泡到外层，触发它的关闭函数。
在哪加 stopPropagation 最有效？
关键位置有三个，按优先级推荐：
-
内层弹窗的内容区（非按钮）：比如弹窗主体
<div class="modal-body">，给它绑定 <code>click并调用e.stopPropagation()，能兜住大部分误触 - 所有内层可点击子元素：按钮、链接、开关等，每个都加，确保不留死角（但较繁琐）
-
内层弹窗根容器的捕获阶段：用
addEventListener('click', handler, true)在捕获阶段拦截，比冒泡阶段更早截断，适合复杂嵌套 -
检查事件绑定方式：外层关闭逻辑是否绑在
document或body上？如果是，stopPropagation无效（它不阻止委托到 document 的事件），得改用event.target判断点击是否在外层遮罩上 -
避免重复绑定：内层弹窗反复打开时，可能多次绑定同一个事件，导致
stopPropagation被执行多遍或失效，建议每次打开前先removeEventListener或用事件委托统一管理 -
移动端注意 touchstart：iOS/Android 上点击实际由
touchstart触发，若只处理click，可能在真机上仍会关闭外层，需对touchstart同样调用stopPropagation()
别只靠 stopPropagation，配合这几点才稳
单靠阻止冒泡还不够，容易遗漏或冲突：
一个最小可运行示例
外层弹窗遮罩点击关闭，内层弹窗点击不关闭外层：
<!-- 外层遮罩，点击关闭 -->
<div id="outer-mask" style="display:block">
<div class="outer-modal">
外层内容
<button id="open-inner">打开内层</button>
</div>
</div>
<p><!-- 内层弹窗 --></p><div id="inner-modal" style="display:none">
<div class="inner-content">
内层内容
<button id="inner-close">关闭内层</button>
</div>
</div>
JS 部分：
// 外层遮罩点击关闭
document.getElementById('outer-mask').addEventListener('click', () => {
document.getElementById('outer-mask').style.display = 'none';
});
<p>// 内层内容区域阻止冒泡
const innerContent = document.querySelector('.inner-content');
innerContent.addEventListener('click', e => e.stopPropagation());</p><p>// 打开内层时显示，并确保点击不穿透
document.getElementById('open-inner').addEventListener('click', () => {
document.getElementById('inner-modal').style.display = 'block';
});</p>
