遮罩层点击关闭失效需精准匹配event.target、合理设置pointer-events、确保遮罩层尺寸铺满视口；ios safari下click偶发不触发，opacity:0时须设pointer-events:none，伪元素需单独禁用。
遮罩层点击关闭失效的典型表现
用户点了遮罩层，弹窗没关；或者点弹窗内部也关了——这是事件冒泡没处理干净的直接信号。更隐蔽的问题是：iOS Safari 下遮罩层 click 事件偶尔不触发，尤其在快速连续点击时；或遮罩层用了 opacity: 0 却忘了设 pointer-events: none，导致后续点击穿透。
必须用 event.target === overlay 判断点击源
别只监听遮罩层的 click 然后直接关，那样会误关——因为弹窗内容区的点击会冒泡上来。正确做法是显式比对目标元素：
- 给遮罩层加唯一 class，比如
class="modal__overlay" - JS 中获取该元素：
const overlay = document.querySelector('.modal__overlay') - 绑定事件时检查：
if (e.target === overlay) { closeModal() } - 不要用
e.target.classList.contains('modal__overlay')——它在遮罩层有子元素（如伪元素）时可能失效
pointer-events 的两个关键开关点
遮罩层必须能响应点击，但又不能干扰弹窗内容交互。这靠两个地方控制：
- 遮罩层本身设
pointer-events: auto（默认值，可省略） - 弹窗内容容器（
.modal__content）必须设pointer-events: auto，否则按钮、输入框全部失活 - 如果遮罩层用了
::before或::after伪元素做渐变/纹理，它们默认继承pointer-events，需单独设为none避免拦截点击 - 避免对整个
.modal容器设pointer-events: none——这会让所有子元素都不可点，包括关闭按钮
移动端点击区域太小导致关不掉？不是 JS 问题，是 CSS
遮罩层点击区域“看起来”全屏，但实际可点击区域可能被压缩。常见原因：
- 遮罩层高度写成
height: 100vh，但页面有滚动条时，vh计算不包含滚动条宽度，右侧留白 → 改用height: 100%+position: fixed更稳 - 遮罩层父容器有
overflow: hidden，裁掉了底部 → 检查其祖先元素 computed 样式 - 遮罩层本身透明度用
rgba(0,0,0,0.5)没问题，但若用了background: transparent又没设宽高，则点击无效 → 必须确保width和height显式为100%或100vw/100vh - 移动端最小点击区域建议 ≥ 44×44px，遮罩层天然满足，但若你把关闭逻辑绑在某个小图标上（而非整个遮罩），那就得单独处理那个图标的
padding
event.target、pointer-events 是否在每一层都按需开关、以及遮罩层自身的尺寸是否真正在视口内完整铺开——这三个点任何一个出偏差，都会让“点一下就关”变成玄学。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
