遮罩层盖住按钮导致无法点击的最快解法是给遮罩设 pointer-events: none，但需注意其不继承、不影响布局与焦点，且遮罩内按钮需提级或用伪元素实现；移动端点透则需 touchend 中 preventdefault。
遮罩层盖住了按钮，点不了——先确认是不是它在“吃”点击
不是 JavaScript 绑错了事件，也不是按钮没写 onclick，大概率是那个半透明的 .mask 或 ::before 伪元素正稳稳压在按钮上，把鼠标事件全拦了。用 Chrome DevTools 右键点击按钮 → “检查”，看高亮框跳到哪个元素上；再按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 Rendering，勾选 Hit test borders，立刻看到哪一层真正在接收点击。
给遮罩加 pointer-events: none 是最快解法
只要遮罩本身不需要响应任何鼠标/触控操作（比如纯背景蒙层、loading 动画盖板），直接给它设：
.mask {
pointer-events: none;
}
注意三点：
- 这个属性只对当前元素生效，不“传染”给子元素，也不“跳过”父容器去影响兄弟节点
- 它不影响布局、动画、焦点（
tabindex）或屏幕阅读器，只关掉鼠标/触控事件捕获 - 别和
opacity: 0或visibility: hidden混用——它们照样拦截点击，而display: none会触发重排且无法做 CSS 过渡
遮罩里有关闭按钮？不能靠继承恢复，得提级或单独设
如果遮罩结构是 <div class="mask"><button class="close">×</button></div>，只给 .mask 加 pointer-events: none，.close 依然点不了——因为浏览器在事件捕获阶段就跳过了整棵子树，压根不读取子元素的 pointer-events 值。
可行方案：
- 把按钮提到遮罩同级：
<div class="mask"></div> <button class="close">×</button>，再用z-index和position: absolute控制视觉位置 - 用伪元素模拟遮罩：
.mask::before { content: ""; position: absolute; pointer-events: none; }，真实按钮留在主 DOM 流中 - React/Vue 场景下优先用 Portal 渲染到
下，彻底脱离祖先干扰
移动端点透不是 pointer-events 能解决的
点透（tap-to-click 穿透到下层）是 iOS/Android 浏览器在 touchstart→touchend→click 时序中产生的行为错乱，不是样式问题。给遮罩设 pointer-events: none 反而会让它收不到 touchend，无法及时关闭弹窗，体验更差。
真正有效的做法：
- 给遮罩层绑定
touchend，回调里立即执行event.preventDefault()和event.stopPropagation() - 保持遮罩
pointer-events: auto（默认值），确保能捕获触摸事件 - 若遮罩内有按钮，显式设
pointer-events: auto，否则会被父层继承覆盖 - 滚动容器内穿透失败？试试给下层可滚动区域（如
.page-content）动态加pointer-events: none，而非只动遮罩
真机测试最容易翻车的地方：iOS Safari 在 input 上方设 none 时，软键盘可能根本不弹；安卓部分 WebView 对 input[type="file"] 的穿透支持也不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
