防止弹窗蒙层点击穿透的核心是切断视觉遮挡与事件响应的错位：通过pointer-events控制交互区域，用elementFromPoint校验点击归属，并配合JS栈管理激活态；移动端还需处理滑动穿透，禁用body滚动但允许蒙层内纵向滑动。
弹窗蒙层点击时防止穿透背景，核心不是单纯阻止冒泡，而是切断“视觉遮挡”和“事件响应”之间的错位。蒙层看似盖住了下面内容，但若处理不当，点击仍会落到底层元素上——这就是点击穿透。关键要让浏览器明确：此刻用户意图操作的是蒙层区域，其他地方不该响应。
用 pointer-events 切断非目标区域的交互
这是最直接有效的手段。蒙层（mask）本身必须能接收点击，所以它的 pointer-events 必须是 auto；而它下方所有非激活内容（比如被遮住的列表、按钮、导航栏），应统一设为 pointer-events: none。
- 蒙层 DOM 节点需有明确 class，例如
.modal-backdrop，CSS 中确保：.modal-backdrop { pointer-events: auto; } - 在蒙层显示时，给
<body>或最外层容器加一个临时 class，如body.modal-open { pointer-events: none; } - 再单独给蒙层内部可点击区域（如关闭按钮、表单控件）显式恢复：
.modal-content * { pointer-events: auto; }
用 elementFromPoint 主动校验点击归属
仅靠 CSS 控制有时不够稳，尤其在快速连点、动画过渡或 z-index 动态变化时。可在全局 click 监听中主动判断点击位置真正落在哪个元素上：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 使用捕获阶段监听：
document.addEventListener('click', handler, true) - 在 handler 中获取坐标：
const x = e.clientX, y = e.clientY - 调用
document.elementFromPoint(x, y)得到最上层可见元素 - 向上查找最近的蒙层容器：
el.closest('.modal')，再比对它是否为当前激活态（例如有data-active="true"） - 如果不是，则立即
e.preventDefault(); e.stopImmediatePropagation();
配合 JS 栈管理激活状态，避免依赖 z-index 数值
多个弹窗重叠时，仅靠 z-index 大小判断谁是“顶层”不可靠——数值可能重复、动态计算易出错。推荐用数组维护 Modal 打开顺序：
立即学习“Java免费学习笔记（深入）”；
- 每次打开新 Modal，将其 DOM 引用 push 进栈：
modalStack.push(modalEl) - 关闭时 pop，并更新栈顶 Modal 的
data-active="true"，其余设为false - 上面
elementFromPoint的校验逻辑就只对比data-active="true"，不比数字 - 同时动态设置每个 Modal 的
style.zIndex，保证视觉层级与逻辑一致
补充：移动端滑动穿透也要一并处理
如果蒙层是全屏 fixed，用户在空白处上下滑动，仍可能触发底部页面滚动。此时不能简单给 body 加 overflow: hidden（兼容性差且影响体验），更稳妥的方式是：
- 蒙层显示时，在
<html>上加 class：html.lock-scroll { overflow: hidden; height: 100vh; } - 同时确保蒙层自身
touch-action: none，禁用其默认手势行为 - 若蒙层内有可滚动内容（如长文本），给该子容器单独设
touch-action: pan-y，允许纵向滑动
