多层Modal嵌套时事件流为捕获→目标→冒泡三阶段；精准控制需分层、分阶段拦截：遮罩用捕获监听并条件关闭，外层Modal用冒泡+条件stopPropagation，内层按钮各自终止冒泡。
在多层 Modal 弹窗嵌套（比如遮罩层 → 外层弹窗 → 内层弹窗）时，事件捕获和冒泡不是“选一个用”，而是浏览器自动执行的完整三段流程：先捕获（window → document → 遮罩 → 外层Modal → 内层Modal父级）、再目标（点击到内层按钮）、最后冒泡（内层Modal → 外层Modal → 遮罩 → body）。精准控制的关键，在于明确在哪一层、哪个阶段拦截，以及拦截到什么程度。
明确各层 DOM 结构与事件流向
典型嵌套结构示例：
点击 #btn-ok 时，事件流顺序为：
→ 捕获：mask → modal-outer → modal-inner（但不到 btn-ok，因 btn-ok 是目标，其父级 modal-inner 才是捕获终点）
→ 目标：btn-ok 自身
→ 冒泡：btn-ok → modal-inner → modal-outer → mask → body → document
按需选择拦截时机：捕获阶段适合“提前拦截”
如果希望点击内层弹窗任意位置（包括空白处）都不关闭外层或遮罩，可在外层 Modal 或遮罩层使用捕获监听 + stopPropagation：
- 给 #mask 绑定捕获阶段点击：
mask.addEventListener('click', e => { if (e.target === mask) closeAllModals(); }, true)—— 这样它在捕获阶段就响应，且只关自身，不影响内层操作 - 给 #modal-outer 同样用
true绑定捕获点击，并在 handler 中检查e.target === modalOuter，避免误关内层 - 关键点：捕获阶段能“抢在目标之前”做判断，适合做全局拦截策略，比如点击遮罩关闭最外层，但不干扰内部交互
冒泡阶段拦截更常用，但要防“过度终止”
对按钮类操作（如“确认”“取消”），通常在冒泡阶段处理并终止向上冒泡：
-
btnOk.addEventListener('click', e => { submitForm(); e.stopPropagation(); })—— 确保提交逻辑执行，且不触发 modal-inner 或外层的点击关闭逻辑 - 若内层弹窗本身支持点击空白处关闭，应只对
e.target === modalInner关闭，而不是监听整个 modalInner 的 click 并无条件 stopPropagation；否则会卡死所有点击 - 避免在 modal-inner 上直接
click → stopPropagation()，这会让所有子元素点击都无法冒泡到外层，连滚动、输入框聚焦都可能异常
真正精准终止 = 阶段 + 条件 + 方法组合
不要只依赖 stopPropagation。真实场景中推荐分层控制：
-
遮罩层（#mask）：捕获阶段监听，仅当
e.target === mask时关闭最外层 Modal，其余情况放行 -
外层 Modal（#modal-outer）：冒泡阶段监听，仅当
e.target === modalOuter时关闭自身，且调用e.stopPropagation()阻止传到 mask -
内层 Modal（#modal-inner）：不阻止冒泡，但所有功能按钮（确认/取消/关闭X）各自调用
e.stopPropagation()，确保操作不意外关闭父级 - 需要彻底中断（比如防止同一元素多个监听器连锁触发）时，用
e.stopImmediatePropagation()，但慎用——它会影响同元素其他必要逻辑（如埋点、日志）
不复杂但容易忽略：事件委托在这里几乎不适用，因为多层 Modal 的关闭逻辑高度依赖具体层级和点击位置，必须逐层绑定、逐层判断。捕获不是用来“替代冒泡”的工具，而是提供了一个提前干预的窗口。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
