本质是事件冒泡与点击穿透，需用document.elementfrompoint+closest定位点击所属modal，结合捕获阶段监听、preventdefault与stopimmediatepropagation拦截非激活层事件，并通过js栈管理激活态确保逻辑可靠。
当多个 Modal 弹窗重叠（比如一个 Modal 里又打开了另一个 Modal），点击最上层的按钮却触发了底层 Modal 的事件，本质是事件冒泡 + 点击穿透（视觉上遮挡但 DOM 未真正隔离）。仅靠 e.stopPropagation() 不够，需结合坐标判断 + 事件拦截 + 层级控制。
确认当前点击是否落在最顶层 Modal 的可交互区域内
Modal 重叠时，DOM 结构通常是嵌套或同级 z-index 排列。关键不是“有没有 Modal”，而是“哪个 Modal 是当前用户意图操作的目标”。可通过 document.elementFromPoint(x, y) 获取鼠标点击处实际捕获到的元素，再向上查找最近的 Modal 容器：
- 在
click事件监听中获取e.clientX和e.clientY - 调用
document.elementFromPoint(x, y)得到最上层可见元素 - 用
closest('.modal')找到它所属的 Modal 实例（建议每个 Modal 有唯一 data-id 或 class 标识） - 对比该 Modal 是否为当前“激活态”（例如有
data-active="true"或最高 z-index）
阻止非目标 Modal 的事件响应（不只是冒泡）
单纯 e.stopPropagation() 对 document 级监听无效，且无法防止 backdrop 点击穿透。更可靠的方式是：在全局 click 监听中做“主动拦截”：
- 给 document 绑定一个捕获阶段监听：
document.addEventListener('click', handler, true) - 在 handler 中用
elementFromPoint判断点击位置归属 - 若点击落在非激活 Modal 或其 backdrop 上，直接
e.preventDefault(); e.stopImmediatePropagation(); - 注意：Modal 的 mask（遮罩层）必须是独立 DOM 节点，且
pointer-events: auto（不能设为 none，否则elementFromPoint会穿透）
用 z-index 和 pointer-events 配合实现视觉与逻辑一致
DOM 层级和 CSS 层级不一致是穿透主因。确保：
- 每个 Modal 渲染时动态设置
style.zIndex = baseZIndex + stackIndex（stackIndex 可维护在栈数组中） - 所有非顶层 Modal 的
pointer-events: none（注意：只对非顶层生效，顶层必须为auto） - Modal 内部按钮等交互元素无需额外处理，因为父容器已禁用 pointer-events，除非显式设为
auto - 避免对 body 或 document 直接设
pointer-events: none，否则整个页面失活
补充：Modal 栈管理让逻辑更可控
不依赖 DOM 顺序或 z-index 数值比对，改用 JS 栈记录打开顺序：
- 每次 openModal() 时 push 到
modalStack = []，并标记isActive = true，其余设 false - closeModal() 时 pop，并激活新的栈顶 Modal
- 所有事件判断都基于
modalStack[modalStack.length - 1]是否为当前 target 所属 Modal - 这样即使 z-index 被其他样式干扰，逻辑依然可靠
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
