点击穿透主因是弹窗未阻断冒泡、背景仍可交互、遮罩缺失；需三层控制：①在弹窗内调用stopPropagation或用closest判断后return；②添加高z-index可点击遮罩并绑定空click或设pointer-events:none；③弹窗开启时给body加.modal-open禁用pointer-events并禁用表单控件，关闭时恢复。
JavaScript 事件委托本身不会导致点击穿透，所谓“弹窗内部点击穿透”，本质是：弹窗未正确阻断事件冒泡 + 背景元素仍可响应事件 + 弹窗遮罩层缺失或不可点击。解决关键在于三层控制：阻止冒泡、禁用背景交互、确保遮罩层捕获点击。
阻止弹窗内点击事件冒泡到背景
即使使用事件委托监听 body 或 document，只要弹窗内的目标元素（如按钮、链接）触发了 click，且未阻止传播，事件仍会向上冒泡到委托容器，进而被误处理。
- 在弹窗内部的事件处理器中显式调用 e.stopPropagation()
- 若用事件委托绑定在 document 上，可通过 e.target.closest('.modal') 判断是否点在弹窗内，是则直接 return
- 示例：document.addEventListener('click', e => { if (e.target.closest('.my-modal')) return; // 处理背景点击 });
添加可点击遮罩层并阻止默认穿透行为
纯 CSS 遮罩（如 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;）若没设置 pointer-events: auto（默认是 auto，但若父级设了 none 就失效），或没绑定任何事件，用户可能误点到遮罩后方元素。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 遮罩层必须存在，且 z-index 高于背景、低于弹窗内容
- 遮罩层建议绑定一个空 click 处理器，或设 pointer-events: none（此时需确保弹窗内容区域有独立事件捕获）
- 更稳妥做法：遮罩层点击时关闭弹窗，同时不阻止冒泡——这样既响应用户意图，又避免干扰后续逻辑
禁用背景交互（视觉 + 行为双保险）
仅靠遮罩不能完全防止键盘焦点或屏幕阅读器穿透，还需主动降级背景：
立即学习“Java免费学习笔记（深入）”；
- 弹出时给 body 加 class（如 .modal-open），配合 CSS：.modal-open { pointer-events: none; }，再给弹窗和遮罩设 pointer-events: auto
- 同时移除 body 的 tabindex 或禁用表单控件（document.querySelectorAll('input, button, select').forEach(el => el.disabled = true)），关闭时恢复
- 对键盘操作补充 focus trap：限制 Tab 键只在弹窗内循环
避免委托目标层级过深或错位
如果事件委托绑定在 document，而弹窗是动态插入的，要注意：委托逻辑是否在弹窗挂载前就已生效？是否因 DOM 变更导致选择器匹配失效？
- 确保委托监听器在页面初始化时就注册，不受弹窗创建时机影响
- 避免用 document.querySelector('.modal') !== null 做条件判断后再绑定——这会导致弹窗出现后委托失效
- 推荐统一委托到 document，用事件源检测（e.target）而非依赖 DOM 存在状态
