JavaScript Range.comparePoint 怎样判断坐标节点在选区之前还是之后

如果你已经拿到了一个 DOM 选区，想判断某个节点里的坐标点在选区之前、选区内部还是选区之后，优先使用 Range.comparePoint(referenceNode, offset)。它返回 -1、0 或 1：分别表示点在范围起点前、范围内、范围终点后；起点和终点也算“范围内”。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/Range/comparePoint

先把三个候选 API 的使用场景分开

选文本、恢复光标或处理编辑器节点时，常见的误区是看到“比较点”就只看方法名。更稳妥的选法是先看问题形状：你是在问一个点相对一个范围的位置，还是只问点是否命中，或者是在比较两个范围的边界。

comparePoint 的最小写法：先确认 referenceNode 和 offset

comparePoint() 的第一个参数必须是一个节点，第二个参数是这个节点内部的位置。下面把一段文本的第 2 到第 6 个字符设为范围，再比较几个候选 offset：

const editor = document.querySelector("#editor");
const textNode = editor.firstChild; // 示例要求编辑器首个子节点就是 Text 节点

const range = document.createRange();
range.setStart(textNode, 2); // Text 节点的 offset 按字符位置计算
range.setEnd(textNode, 6);   // 终点也属于可比较的范围边界

const checks = [1, 2, 5, 6, 7].map((offset) => ({
  offset,
  result: range.comparePoint(textNode, offset), // -1 前、0 内、1 后
}));

console.table(checks);
// 按这段范围的边界，1 为 -1，2/5/6 为 0，7 为 1。

这里最重要的是不要只盯着数字。range.setStart(textNode, 2) 和 range.setEnd(textNode, 6) 定义的是同一个 Text 节点内的边界点，因此 offset 为 6 时仍然返回 0。如果把 offset 写成超过节点允许范围的值，问题就不再是“点在前还是在后”，而是先要修正坐标本身。

元素节点的 offset 不是像素，也不是字符下标

当 referenceNode 是 Text、Comment 或 CDATASection 时，offset 表示从节点开头数过的字符数；当它是普通元素时，offset 表示从开头数过的子节点数量。例如一个元素的 offset 为 0，代表它的第一个子节点之前；offset 为 1，代表第一个子节点之后、第二个子节点之前。

const container = document.querySelector("#editor");
const firstChild = container.firstChild;
const range = document.createRange();

range.selectNodeContents(container); // 让范围覆盖容器的全部子节点

// 元素节点的 offset 是子节点边界，不是屏幕 x 坐标。
const beforeFirst = range.comparePoint(container, 0);
const afterFirst = range.comparePoint(container, 1);

console.log({ beforeFirst, afterFirst });
// 这里的数值取决于范围边界和容器子节点结构，不能按像素位置解读。

如果你的业务坐标来自鼠标事件的 clientX/clientY，先用 document.caretPositionFromPoint() 或兼容方案把屏幕位置转换为节点与 offset，再交给 comparePoint()。两步的职责不同：前一步做几何命中，后一步做 DOM 边界比较。

按问题选择 API，并避开三个边界

如果调用方需要三态分支，例如“向前移动、保持当前选择、向后移动”，就保留 comparePoint() 的数字结果；如果只需要启用或禁用一个按钮，用 isPointInRange() 转成布尔语义更清楚。compareBoundaryPoints() 则需要另一个 Range，适合做选区之间的先后或包含关系判断，不适合拿一个节点坐标点直接调用。

还要留意三个实际边界：第一，节点必须属于同一个文档上下文，不能把另一个 Document 创建的节点直接拿来比较；第二，offset 必须符合节点类型允许的范围，元素按 child boundary 计算；第三，返回 0 是“点在范围内（包括两端）”，不是“点恰好位于文本中间”。

常见问题

comparePoint 返回 0 时一定是字符的中间位置吗？

不一定。0 表示坐标点落在 Range 内，起点和终点也包含在内；它只说明边界关系，不说明点是否位于某个字符的视觉中心。

可以把 mouseEvent.clientX 直接传给 comparePoint 吗？

不可以。clientX 是像素坐标，comparePoint 需要节点和节点内部 offset。先完成屏幕位置到 DOM 点的转换，再比较 Range。

小结：把问题拆成“点的来源”“DOM offset 的含义”和“需要几态结果”三步，Range.comparePoint() 的选择就很稳定：需要前、内、后三态就用它，需要真假就用 isPointInRange()，需要比较两个选区才用 compareBoundaryPoints()。