elementsfrompoint 返回的元素顺序按 dom 深度优先遍历+几何包含判断，而非视觉层级；需过滤 pointer-events: none、不可见元素，并结合 elementfrompoint 与坐标偏移做穿透式精准捕获。
elementsFromPoint 返回的元素顺序为什么和视觉层级不一致
Document.elementsFromPoint 返回的是从文档根节点向下遍历 DOM 树时，满足“包含该点”条件的元素列表，**不是按 CSS z-index 或渲染层叠顺序排列的**。它本质上是“DOM 深度优先 + 几何包含判断”的结果，所以常出现：最上层的按钮没被选中，反而先拿到它父容器里的文本节点或隐藏的装饰 div。
实际点选编辑器内重叠区域（比如工具栏浮层盖在富文本框上、嵌入的代码块悬浮在段落上方）时，必须主动过滤掉非交互目标元素：
- 跳过
pointer-events: none的元素（检查getComputedStyle(el).pointerEvents） - 排除
display: none或visibility: hidden的元素 - 忽略只用于布局/装饰、无业务语义的容器（如 class 名含
overlay-bg、spacer的元素） - 优先保留有
contenteditable、data-editor-target或明确 role（如role="button"）的元素
如何用 elementsFromPoint 做“点击穿透”式精准捕获
编辑器里常见需求：用户点在浮动工具栏按钮上，但工具栏本身是半透明遮罩，底层内容（如图片、表格）也应响应点击 —— 这时不能直接用第一个元素，得模拟“穿透”。
推荐做法是结合 elementsFromPoint 和 elementFromPoint 做分层试探：
- 先调用
document.elementsFromPoint(x, y)获取全量候选 - 遍历候选数组，对每个元素调用
el.elementFromPoint(x - el.getBoundingClientRect().left, y - el.getBoundingClientRect().top)，看其内部是否真有可点击子元素（避免误判父容器） - 用
el.matches(':hover')辅助判断当前鼠标是否真正悬停在该元素有效区域（需确保样式已生效） - 若某元素
getBoundingClientRect()宽高为 0，或offsetWidth === 0，直接跳过 —— 这类元素常是占位符或未渲染完成的
移动端 touchstart 场景下 elementsFromPoint 失效怎么办
iOS Safari 和部分安卓 WebView 中，touchstart 触发时，elementsFromPoint 可能返回空数组或错误顺序，因为触摸事件坐标未同步到渲染管线，或页面存在缩放/transform。
稳妥方案是 fallback 到 document.elementFromPoint + 手动递归查找：
- 先用
document.elementFromPoint(touch.clientX, touch.clientY)拿到顶层元素 - 若该元素不可交互，再调用
el.parentElement?.elementsFromPoint(...)向上逐层查（注意检查el.parentElement是否存在） - 对
touch对象使用touches[0]坐标，而非changedTouches[0]—— 后者在多指操作中可能偏移 - 加 1px 坐标抖动（如
x+1, y）重试一次，规避某些浏览器因 subpixel 渲染导致的命中失败
性能陷阱：频繁调用 elementsFromPoint 导致卡顿
在拖拽、鼠标移动中持续调用 elementsFromPoint 是高开销操作，尤其在复杂 DOM 或低性能设备上会明显掉帧。
关键优化点：
- 加节流：用
requestIdleCallback或setTimeout(..., 0)延迟执行，避免阻塞主线程渲染 - 缓存最近一次结果，两次调用坐标差
- 避免在
scroll或resize回调里调用 —— 这些事件触发频繁，且此时 layout 尚未完成，elementsFromPoint结果不可靠 - 如果只关心特定区域（如编辑器内容区），用
editorEl.elementsFromPoint(...)替代document.elementsFromPoint，减少遍历范围
深度点选真正难的不是 API 调用，而是怎么定义“用户想点谁”——CSS 层叠、DOM 结构、事件代理、移动端适配，每层都可能悄悄改写你的预期。别依赖默认顺序，每次都要按业务规则筛一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
