遮罩层盖不住按钮是因为不在同一层叠上下文，需检查父容器是否创建新上下文；按钮高亮区“挖空”需分层控制pointer-events；动态渲染时应使用框架生命周期而非querySelector硬等；移动端须同时绑定touchstart和click事件。
遮罩层为什么总盖不住按钮？先查 z-index 层叠上下文
遮罩层没挡住按钮，不是 z-index 写小了，而是它和按钮根本不在同一个层叠上下文里。比如按钮父容器加了 transform: translateZ(0)、opacity: 0.99 或 filter: blur(1px)，就会悄悄创建新上下文——遮罩的 z-index: 9999 只跟这个父容器比，压不过页面其他区域。
快速验证：打开开发者工具 → “Computed” 面板 → 找按钮和遮罩的最近共同祖先，看它是否带上述属性。临时修复可加 isolation: isolate；长期解法是把遮罩 DOM 直接挂到 document.body 底部，绕开嵌套结构。
按钮高亮区怎么精准“挖空”？pointer-events 要分层控制
遮罩层设 pointer-events: none 是错的——这会让整个遮罩不可交互，连关闭按钮都点不了。正确做法是让遮罩本身可响应事件，再精确控制哪些区域透出点击。
- 遮罩层设
pointer-events: auto，并用z-index确保它在最上层 - 遮罩默认覆盖全部区域，但高亮按钮所在区域要“挖空”：给按钮加
pointer-events: auto（必须显式写） - 按钮外的遮罩区域设
pointer-events: none，这样点击才真正落到按钮上 - 注意：按钮自身若被父容器包裹，且父容器设了
pointer-events: none，那子元素的auto也无效
动态渲染按钮时，遮罩定位总失败？别用 querySelector 硬等
React/Vue 页面里，引导一启动就跑 document.querySelector('#submit-btn')，结果报错 Cannot read property 'getBoundingClientRect' of null——因为组件还没挂载，DOM 根本不存在。
立即学习“前端免费学习笔记（深入）”；
不能靠轮询或 setTimeout 猜时机，得用框架感知真实渲染节点：
- Vue 场景：在
mounted或onMounted后，用nextTick确保 DOM 更新完成再计算位置 - React 场景：用
useEffect+ref回调，等 ref.current 存在后再调getBoundingClientRect() - 异步加载按钮（如权限控制后才显示）：引导逻辑必须监听该模块的加载状态，而不是假设“页面一打开按钮就在”
移动端点不中按钮？touchstart 和 click 必须双绑
iOS Safari 和部分安卓 WebView 中，只监听 click 的按钮在触摸屏上可能完全无响应——click 有 300ms 延迟，且依赖 focus 状态，而引导层常缺 cursor: pointer 或 user-select: none，进一步加剧兼容问题。
必须同时覆盖触控与鼠标路径：
- 按钮绑定
touchstart和click双事件，在touchstart中立刻调event.preventDefault()防滚动干扰 - CSS 加
-webkit-tap-highlight-color: transparent和user-select: none，避免点击反馈错乱 - 别用
onclick="nextStep()"行内写法，移动端容易因解析时机丢失绑定
真正难的不是算出按钮坐标，而是每次按钮 DOM 结构微调、CSS 新增一个 transform、甚至引入第三方库时，都要重新验证遮罩是否还“认得”它——这种隐式依赖最容易在迭代中被遗忘。
