点击弹窗外部关闭需监听document的click事件，用modal.contains(e.target)判断点击是否在弹窗外，确保modal已挂载且结构合理，配对添加/移除事件监听，并注意移动端点击穿透问题。
点击弹窗外部区域关闭，不触发内部点击事件
关键在于区分点击目标是弹窗本身、弹窗内容，还是背景遮罩层。直接给 document 绑监听器再判断 e.target 最可靠，比只监听遮罩层更健壮（比如弹窗带圆角、阴影或留白时，遮罩层可能无法覆盖全部“空白处”）。
常见错误是把事件监听加在弹窗容器上，用 click 冒泡到 document，但没排除弹窗内部元素——结果点按钮、输入框也关窗了。
- 监听
document的click事件，不是弹窗父容器 - 用
e.target检查点击位置是否在弹窗 DOM 树之外：!modal.contains(e.target) - 确保弹窗 DOM 已挂载（比如在
showModal()后再绑定，或用事件委托）
HTML 结构必须包含可识别的 modal 容器和遮罩层
没有语义化结构，JS 就没法准确判断“哪里算空白”。推荐用一个外层 div 包裹遮罩层和弹窗内容，并赋予唯一 class 或 id，例如 class="modal-overlay"。
错误结构示例：弹窗和遮罩层平级、无共同父容器，或弹窗用 position: fixed 但脱离文档流后 contains() 判定失效（其实不会，contains() 仍有效，但容易误判）。
- 遮罩层（
div.modal-overlay）需设display: block和足够 z-index - 弹窗内容（
div.modal-content）必须是遮罩层的子元素，或至少同属一个可引用的节点 - 避免用
body直接 append 弹窗而不设父容器，否则modal.contains()会因节点未挂载返回false
JavaScript 实现：防重复绑定与移除逻辑
每次打开弹窗都重新绑定 document 监听器，不清理旧监听，会导致多次关闭；关闭后不移除监听，可能影响其他功能。必须配对使用 addEventListener / removeEventListener。
不能用匿名函数绑定，否则无法移除。必须用具名函数或保存函数引用。
let closeModalHandler = null;
function openModal() {
const modal = document.getElementById('my-modal');
modal.style.display = 'block';
closeModalHandler = (e) => {
if (!modal.contains(e.target)) {
modal.style.display = 'none';
document.removeEventListener('click', closeModalHandler);
closeModalHandler = null;
}
};
document.addEventListener('click', closeModalHandler);
}
function closeModal() {
const modal = document.getElementById('my-modal');
modal.style.display = 'none';
if (closeModalHandler) {
document.removeEventListener('click', closeModalHandler);
closeModalHandler = null;
}
}
移动端点击穿透与 focus 陷阱
在 iOS Safari 或部分安卓浏览器中，快速连续点击遮罩层可能触发底层元素响应（比如点到背后的按钮），尤其当弹窗内含 input 或 button 且未禁用默认行为时。
这不是 bug，而是浏览器合成层渲染和事件分发延迟导致的“点击穿透”。解决方式不是阻止所有事件，而是精准控制：
- 遮罩层加
style="touch-action: none"，抑制默认滚动/缩放干扰 - 弹窗显示时，给
body加overflow: hidden，防止背景滚动引发重排错乱 - 避免在
modal-content内部用pointer-events: none—— 这会让内部按钮失效 - 如果弹窗有表单，首次聚焦
input后再点空白处，iOS 可能先失焦再触发关闭，属正常行为，无需 hack
contains() 判定结果。如果它被动态插入到 body 底部，而你用 document.querySelector('.modal') 获取后缓存了引用，后续操作没问题；但如果每次 open 都新建节点却不更新引用，contains() 就永远返回 false。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
