应使用捕获阶段监听document点击事件并结合closest判断点击位置，仅当点击不在任何弹窗内时关闭；内部按钮需调用stopPropagation阻止冒泡。
在弹窗嵌套场景中，想让全局点击事件（比如点击空白处关闭弹窗）优先于内部弹窗的点击事件触发，关键不是“事件捕获一定优先”，而是要合理利用捕获阶段 + 正确的事件委托 + 阻止冒泡，避免内部点击意外触发外层关闭逻辑。
理解捕获阶段的真实作用
事件捕获是从 window → document → body → 父元素 → 子元素逐层向下传递的过程。它确实发生在冒泡之前，但默认所有事件监听器都注册在冒泡阶段（addEventListener(type, handler, false)）。若想在捕获阶段响应，必须显式传入 true：
// 在捕获阶段监听 document 点击（优先于任何子元素的冒泡监听）
document.addEventListener('click', handleGlobalClick, true);
这样，哪怕点击的是最内层弹窗里的按钮，handleGlobalClick 也会在事件到达该按钮前就被调用。
弹窗嵌套时的典型结构与问题
常见嵌套结构如下：
立即学习“Java免费学习笔记（深入）”；
<div id="modal-outer">
<div id="modal-inner">
<button id="btn-close-inner">关内层</button>
</div>
<button id="btn-close-outer">关外层</button>
</div>
问题：点击 #btn-close-inner 时，如果不加控制，document 的捕获监听会先触发，可能误关外层弹窗；而它的点击事件又会冒泡到外层容器，再次触发关闭逻辑。
正确做法：捕获监听 + 明确目标判断 + 选择性阻止
不盲目阻止，而是精准识别点击是否“在弹窗外”：
- 在捕获阶段监听
document，但只在点击目标不在任何弹窗容器内时才执行关闭 - 给每个弹窗容器设唯一 class（如
modal、modal--inner），方便判断 - 内部按钮点击时，调用
event.stopPropagation()阻止冒泡，但不阻止捕获（捕获已发生过了）
document.addEventListener('click', (e) => {
// 捕获阶段：检查点击是否落在所有弹窗之外
const isClickInModal = e.target.closest('.modal');
if (!isClickInModal) {
closeModalAll(); // 关闭全部弹窗
}
}, true); // 注意：true 表示捕获阶段
// 内部按钮点击：阻止冒泡，避免触发外层容器的 click 处理
document.getElementById('btn-close-inner').addEventListener('click', (e) => {
e.stopPropagation(); // ✅ 阻止冒泡，不影响捕获逻辑
closeInnerModal();
});
补充建议：避免过度依赖捕获
捕获虽早，但调试困难、可读性低。更健壮的方式是：
- 统一用冒泡监听
document，配合e.target.closest('.modal')判断（性能足够，逻辑清晰） - 为弹窗区域设置
pointer-events: none（慎用，影响交互）或用 backdrop 元素隔离点击区 - 使用
focusout+blur配合 tabindex 管理弹窗焦点流，实现“失焦即关闭”
