elementFromPoint 返回 null 主因是坐标非视口坐标，需用 clientX/clientY 并校正缩放、iframe 偏移及移动端 touch 失真问题，跨 iframe 需下沉调用，筛选可交互元素需过滤 pointer-events 和 display 状态。
elementFromPoint 为什么返回 null 或错误元素
调用 elementFromPoint(x, y) 返回 null，通常不是坐标错，而是坐标没转成视口坐标（viewport coordinates）。它只接受相对于当前可视区域左上角的像素值，不接受页面滚动偏移后的文档坐标。如果用了 event.clientX 却在 iframe 或缩放页面里调用，也可能因坐标系不一致而失效。
常见错误现象：elementFromPoint(100, 200) 在页面滚动后突然找不到按钮；或在 position: fixed 元素遮挡时，却返回了背后的内容。
- 确保
x、y是视口内有效坐标（比如来自click事件的clientX/clientY） - 不要对负数或超出当前视口宽高的坐标调用，否则一律返回
null - 若页面有
transform: scale()，需手动除以window.devicePixelRatio或用getBoundingClientRect()校正
如何正确获取点击位置的最顶层可交互元素
elementFromPoint 本身只返回“绘制层级最上”的元素，但不保证可交互——比如它可能返回一个透明遮罩层、pointer-events: none 的父容器，或被 z-index 压住但 DOM 顺序靠后的元素。要拿到真正响应点击的那个，得结合条件过滤。
使用场景：实现自定义右键菜单、点击穿透检测、或调试元素覆盖关系。
- 先调用
document.elementFromPoint(x, y)获取原始结果 - 向上遍历父级，跳过
pointer-events: none或visibility: hidden的节点 - 检查
getComputedStyle(el).display !== 'none'和el.offsetParent !== null - 最终筛选出第一个满足
el.matches(':hover') || el.matches('*:not([aria-hidden="true"])')的元素（按需增强）
跨 iframe 场景下 elementFromPoint 失效怎么办
在主页面调用 elementFromPoint 永远不会返回 iframe 内部的元素，这是同源策略和渲染隔离决定的。即使 iframe 与主站同域，它的坐标系也是独立的，clientX/clientY 值不能直接复用。
解决思路是把查找逻辑下沉到 iframe 内部执行：
- 用
iframe.contentDocument?.elementFromPoint(relX, relY)，其中relX/relY需从主页面坐标减去 iframe 的getBoundingClientRect()偏移 - 注意 iframe 可能未加载完成，需监听
load事件后再操作 - 若跨域，无法访问
contentDocument，此时只能靠 postMessage 让 iframe 自行调用并回传结果
示例校正代码：
const rect = iframe.getBoundingClientRect();<br>const relX = x - rect.left;<br>const relY = y - rect.top;
elementFromPoint 在移动端 touch 事件中要注意什么
移动端 touch 事件的 touches[0].clientX/clientY 理论上可用，但实际中常因浏览器缩放、viewport 设置或 pinch-zoom 导致坐标失真。iOS Safari 尤其容易在双击缩放后返回错误元素。
性能影响不大，但兼容性风险集中在这几点：
- 避免在
touchmove中高频调用——重排虽不触发，但频繁查询绘制层级仍有开销 - 安卓 WebView 中，若页面设置了
user-scalable=no，elementFromPoint表现更稳定 - 推荐统一用
event.changedTouches[0]而非event.touches[0]，避免多点触控干扰
容易被忽略的是：某些 PWA 或全屏模式下，状态栏高度会影响 clientY，导致顶部元素查不到——这时应优先用 pageY + window.scrollY 反推视口坐标。
