elementfrompoint 返回的是渲染层叠最顶层元素，非编辑器中最深层可编辑节点；需先用它定位容器，再结合 caretrangefrompoint 或 dfs 遍历查找真实编辑节点。
elementFromPoint 返回的“最顶层”不等于编辑器里“最深层可编辑节点”
很多人以为 document.elementFromPoint(x, y) 能直接拿到富文本编辑器（如 contenteditable 区域）中光标正下方的 textNode 或叶子级 span，但其实它只返回渲染层叠顺序上最上面的那个元素——可能是外层的 div[contenteditable]、一个浮动工具栏遮罩，甚至 iframe 的边框。它不深入 DOM 树，也不关心编辑语义。
真正要定位“编辑器中特定坐标点下的最深层元素”，得先用 elementFromPoint 锁定容器，再配合 document.caretRangeFromPoint 或遍历子树逼近真实编辑位置。
为什么直接用 clientX/clientY 调用 elementFromPoint 在编辑器里常失效
富文本编辑器往往嵌套深、缩放多、有 fixed 定位工具栏，还可能被 pointer-events: none 的蒙层覆盖。此时 elementFromPoint 返回的常是蒙层或容器本身，而非你点击的文字区域。
- 坐标未校正：编辑器容器用了
transform: scale(0.85)，但clientX/clientY是原始像素，需除以getComputedStyle(editor).transformMatrix或用editor.getBoundingClientRect()反推 - 滚动干扰：编辑器内容区独立滚动（如
overflow-y: auto），clientX/clientY是视口坐标，但目标元素实际在子滚动容器内，需减去其scrollTop和scrollLeft - touch 事件偏差：移动端
touchstart的touches[0].clientX可能因 pinch-zoom 失真，建议改用touches[0].pageX - window.scrollX并限定在编辑器getBoundingClientRect()范围内
如何从 elementFromPoint 结果往下找到真正的编辑节点
拿到 elementFromPoint 返回的顶层元素后，不能停在这里。编辑器真正响应输入的是最靠近光标的可编辑叶子节点，比如某个 TextNode 或带 contenteditable="true" 的内联元素。
- 先过滤掉非编辑上下文：检查
el.contentEditable === 'true'或el.closest('[contenteditable]') - 用
document.caretRangeFromPoint(x, y)替代二次查找——它专为编辑场景设计，返回的Range对象能直接.commonAncestorContainer定位到最深文本节点 - 若浏览器不支持
caretRangeFromPoint（如 Safari 旧版），就手动从elementFromPoint结果向下 DFS 遍历：跳过display: none、visibility: hidden、pointer-events: none的节点，优先选nodeType === 3（Text）或isContentEditable为 true 的元素 - 避免递归过深：加深度限制（如 6 层），防止遇到超长嵌套结构卡死
跨 iframe 编辑器（如 Quill、TinyMCE 的 iframe 模式）怎么处理
如果编辑器运行在同源 iframe 中，document.elementFromPoint 在父页调用永远返回 null 或父页元素。必须下沉执行。
- 等
iframe.onload触发后再操作，否则iframe.contentDocument为空 - 用
iframe.getBoundingClientRect()拿到其视口偏移，算出坐标在 iframe 内的相对值：relX = clientX - rect.left，relY = clientY - rect.top - 在 iframe 内调用：
iframe.contentDocument.elementFromPoint(relX, relY)，再按上一步向下找编辑节点 - 跨域 iframe 无法访问
contentDocument，此时只能靠postMessage发坐标过去，由 iframe 内部执行并回传结果；注意加超时和错误 fallback
编辑器坐标定位真正的难点不在 API 调用本身，而在于“坐标系切换”和“语义降级”——你得先确认当前坐标属于哪个渲染上下文，再决定用 elementFromPoint 还是 caretRangeFromPoint，最后还得人工绕过 pointer-events 和 visibility 的拦截逻辑。漏掉任一环，拿到的都只是视觉表层的假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
