用elementfrompoint()可快速定位遮挡元素，返回值即实际接收事件的节点；getboundingclientrect()全0通常因display:none或overflow:hidden导致；z-index失效多因层叠上下文隔离；四角采样+contains()可精准检测遮挡。
用 elementFromPoint() 快速验证谁挡住了按钮
点击没反应，八成不是 JS 写错了，而是你点的根本不是目标元素。最直接的办法是用 elementFromPoint() 检查鼠标坐标上层是谁：
打开控制台，执行：
const x = 100; const y = 200;<br>console.log(document.elementFromPoint(x, y));把
x、y 换成按钮视觉中心的大致坐标（可用开发者工具的「取色器」辅助定位）。返回的 DOM 节点就是实际接收事件的那个——大概率是某个透明 div 或未设 pointer-events 的蒙版层。
getBoundingClientRect() 返回全 0？先查 display 和 overflow
运行 el.getBoundingClientRect() 后发现 top、left 全是 0，不代表元素“在左上角”，更可能是它被彻底排除在渲染流程外：
-
display: none或父级是display: none→ 直接不参与布局，getBoundingClientRect()必然全 0 - 父容器设了
overflow: hidden且子元素position: absolute偏移出边界 → 元素还在文档流中，但矩形区域被裁为 0 - 用了
clip-path或mask把内容清空 → 矩形框存在，但视觉不可见，容易误判为“加载失败”
z-index，先确认它是否真被渲染出来了。z-index 不生效？检查是否掉进层叠上下文陷阱
z-index 只对定位元素（position: relative/absolute/fixed/sticky）有效，且它的数值只在当前层叠上下文中起作用：
- 目标元素自己没设
position，光写z-index: 999→ 完全无效 - 父容器有
transform、filter、will-change或opacity → 自动创建新层叠上下文，子元素的 <code>z-index就只跟这个父容器比，不跟全局比 - 同级两个兄弟元素：一个设了
position: relative; z-index: 1，另一个没设z-index但写了position: absolute; z-index: 999→ 后者仍会被前者挡住，因为后者属于默认层叠上下文，整体层级低于前者
遮挡检测脚本要防误判：四角采样 + contains() 过滤
单靠 elementFromPoint(x, y) 容易误判，比如元素带圆角、边框或有子元素悬出，顶点可能落在子节点上。稳妥做法是四角采样并排除子孙：
function isOverlapped(el) {<br> const rect = el.getBoundingClientRect();<br> const points = [<br> [rect.left + 1, rect.top + 1],<br> [rect.right - 1, rect.top + 1],<br> [rect.left + 1, rect.bottom - 1],<br> [rect.right - 1, rect.bottom - 1]<br> ];<br> return points.some(([x, y]) => {<br> const topEl = document.elementFromPoint(x, y);<br> return topEl && topEl !== el && !el.contains(topEl);<br> });<br>}注意：如果目标元素本身是 position: fixed，而页面滚动了，getBoundingClientRect() 仍返回视口内坐标，但 elementFromPoint() 坐标系也是相对于视口的，所以无需额外转换——这点常被忽略，导致脚本在滚动后失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
