Selection 的 anchor 与 focus 怎样识别反向选择

做富文本编辑、批注或拖选菜单时，我最容易踩到的坑是把“选择开始的位置”和“文档中更靠前的位置”当成一回事。用户从左向右拖动时，anchor 通常在前面；从右向左拖动时，anchor 仍然是按下位置，反而会落在文档后面。

因此，识别反向选择不能只比较字符串，也不能只看 Range.startContainer。更稳妥的顺序是：先读取 Selection.direction；如果浏览器没有给出明确方向，再用 anchorNode/anchorOffset 与 focusNode/focusOffset 构成的两个 DOM 边界点做比较。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/Selection

anchor 和 focus 分别代表什么

document.getSelection() 返回当前文档的选区对象。它的 anchorNode 与 anchorOffset 表示用户开始选择的边界点，focusNode 与 focusOffset 表示选区扩展到的边界点。这里的“开始”和“结束”是交互方向概念，不等价于文档顺序。

浏览器内部仍会把可选内容整理成一个按文档顺序排列的 Range。所以向右拖和向左拖可能得到同样的文本与同样的 Range 起止点，但 Selection 的 anchor/focus 顺序相反。

先排除没有有效方向的状态

方向判断前先处理三个状态：没有 Selection 对象、rangeCount 为零，以及 isCollapsed 为真。折叠选区只有一个位置，谈不上正向或反向；清空选区后，anchorNode 和 focusNode 也可能是 null。

function getSelectionState(selection = document.getSelection()) {
  // 没有范围或只有光标时，不返回 forward/backward，避免把空选区当成反向选择。
  if (!selection || selection.rangeCount === 0) return { kind: 'none' };
  if (selection.isCollapsed || !selection.anchorNode || !selection.focusNode) {
    return { kind: 'collapsed' };
  }

  return {
    kind: 'range',
    anchorNode: selection.anchorNode,
    anchorOffset: selection.anchorOffset,
    focusNode: selection.focusNode,
    focusOffset: selection.focusOffset,
  };
}

这个状态对象只负责把输入整理干净，不急着用 toString() 判断方向。文本内容相同并不能说明两个端点的交互顺序相同。

优先读取 Selection.direction

在支持方向属性的浏览器中，selection.direction 是最直接的入口。拿到 forward 或 backward 就可以直接用于显示工具栏、决定批注插入端或调整键盘操作；其他值则继续走边界点兜底。

function readDirection(selection = document.getSelection()) {
  // 先处理空状态，避免读取不存在的端点。
  const state = getSelectionState(selection);
  if (state.kind !== 'range') return state.kind;

  // direction 是浏览器直接暴露的交互方向，取不到明确值时再走比较逻辑。
  if (selection.direction === 'forward' || selection.direction === 'backward') {
    return selection.direction;
  }

  return compareSelectionPoints(selection);
}

用 Range 比较 anchor 和 focus 的文档顺序

兼容兜底的关键不是比较两个 Node 的字符串，而是把每个“节点 + 偏移量”当成 DOM 边界点。可以分别创建一个折叠 Range，再用 compareBoundaryPoints(Range.START_TO_START, other) 比较它们的起始边界。

function comparePoints(nodeA, offsetA, nodeB, offsetB) {
  // 每个 Range 都折叠在一个边界点，比较时不会改变用户当前选区。
  const pointA = document.createRange();
  const pointB = document.createRange();
  pointA.setStart(nodeA, offsetA);
  pointA.collapse(true);
  pointB.setStart(nodeB, offsetB);
  pointB.collapse(true);

  // 返回负数表示 A 在 B 前面，零表示同一点，正数表示 A 在 B 后面。
  return pointA.compareBoundaryPoints(Range.START_TO_START, pointB);
}

function compareSelectionPoints(selection) {
  // anchor 在文档后面时，用户就是从右向左完成选择的。
  const order = comparePoints(
    selection.anchorNode,
    selection.anchorOffset,
    selection.focusNode,
    selection.focusOffset,
  );
  return order > 0 ? 'backward' : 'forward';
}

这个比较只读取新建的临时 Range，没有调用 removeAllRanges()，因此不会清掉用户正在看的高亮。等于零的情况通常对应同一点，但前面的 isCollapsed 检查会先把它归入折叠状态。

跨文本节点时不要把 offset 当成全局下标

当选区跨过两个文本节点时，anchorOffset 只在 anchorNode 内有意义，focusOffset 也只在 focusNode 内有意义。它们不是整段文章的字符下标，不能直接相减。

如果业务需要得到用户实际选中的连续内容，使用 selection.getRangeAt(0) 读取文档顺序的 Range；如果业务需要知道用户是从哪一端拖过来的，读取 anchor/focus 或 direction。两套信息应分开保存。

在 selectionchange 中只做轻量读取

方向通常用于更新浮动菜单或批注状态，可以监听 document 的 selectionchange。事件触发频率可能较高，回调里只读取当前选区和必要的 DOM 边界，不要每次都重建整棵编辑器树。

document.addEventListener('selectionchange', () => {
  // selectionchange 可能在选区被清空时触发，因此每次都重新读取状态。
  const selection = document.getSelection();
  const direction = readDirection(selection);

  // 这里只更新轻量状态；实际项目中可再用 requestAnimationFrame 合并渲染。
  document.documentElement.dataset.selectionDirection = direction;
});

几个容易混淆的边界

结语

判断反向选择的核心只有一句话：anchor/focus 记录交互端点，Range start/end 记录文档顺序。优先使用 Selection.direction；需要兼容或自己解释边界时，把两组“Node + offset”构造成折叠 Range 后比较。这样既能覆盖跨文本节点选区，也不会因为读取方向而破坏用户当前选区。

相关问题

• 为什么不能直接比较 anchorOffset 和 focusOffset？ 因为两个 offset 可能属于不同文本节点，只有放回 DOM 边界关系中才有顺序意义。
• Range.startContainer 是否就是 anchorNode？ 不一定。Range 会按文档顺序保存 start/end，而 anchor/focus 保留用户交互方向。
• selectionchange 中能否直接修改选区？ 可以调用 Selection 的修改方法，但应避免在监听器里无条件修改，以免造成重复事件或覆盖用户操作。