应精准拦截目标事件而非全局阻止：为每层模态框设唯一标识，通过 modalel.contains(e.target) 判断点击位置，仅在遮罩或关闭按钮点击时调用 stoppropagation()，避免污染 document 级事件流。
在多层模态框嵌套场景中，事件冒泡容易导致点击遮罩层或按钮时意外关闭外层模态框。核心思路是：**精准拦截目标事件、合理使用 stopPropagation()、避免全局阻止、结合事件委托与目标判断**。
明确事件触发源，只拦截真正需要的点击
不要对所有模态框统一调用 stopPropagation()。应先判断事件是否发生在当前模态框内部（包括内容区和自身遮罩），再决定是否拦截。
- 给每个模态框容器（含遮罩和内容）设置唯一 class 或 data 属性，例如
data-modal-id="modal-1" - 在绑定的点击事件处理函数中，检查
e.target是否属于当前模态框的 DOM 子树：if (!modalEl.contains(e.target)) { /* 点击在模态框外，可关闭 */ } - 仅当点击发生在本层模态框的「关闭按钮」或「遮罩层」上，且你希望它不穿透到外层时，才调用
e.stopPropagation()
为遮罩层和关闭按钮单独绑定事件并主动拦截
遮罩层（overlay）和关闭按钮（close-btn）是主要冒泡风险点。建议显式绑定事件，并在其中终止传播：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 遮罩层点击关闭本层时，加
e.stopPropagation()，防止触发外层遮罩的关闭逻辑 - 关闭按钮同理，尤其注意多个模态框共用类似类名时，确保事件绑定作用于正确实例
- 示例：
overlay.addEventListener('click', e => {<br> closeCurrentModal();<br> e.stopPropagation(); // 关键：阻断向上冒泡<br>});
避免在 document 或 body 上用 stopPropagation 全局拦截
有些方案会在 document.addEventListener('click', ...) 中调用 stopPropagation()，这会破坏其他组件的正常事件流（如下拉菜单、Tooltip），不可取。
- 推荐做法：在 document 点击事件中，只做「点击是否在任意模态框之外」的判断，然后关闭最顶层可见模态框
- 不调用
e.stopPropagation()，而是靠e.target和modalEl.contains()区分层级 - 若需阻止外层响应，应由内层模态框自己在合适时机（如遮罩点击后）控制，而非污染全局事件
利用 capture 阶段提前捕获并选择性处理
在极复杂嵌套中，可借助事件捕获阶段提前介入，更早决定是否放行：
- 为最外层模态框监听捕获阶段事件：
outerModal.addEventListener('click', handler, true); // 第三个参数设为 true - 在捕获 handler 中检查
e.target是否属于内层模态框，若是则直接e.stopImmediatePropagation() - 这种方式比冒泡阶段拦截更前置，适合需要「外层主动让权」的场景，但需谨慎使用，避免逻辑耦合过重
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
