如何判断用户点击的是已高亮/选中的文本？

要实现这个需求，核心是利用浏览器的Selection API获取选中区域的位置信息，再结合点击事件的坐标进行范围判断，具体步骤如下：

1. 保存用户选中的文本范围 #

监听页面的选中文本变化事件，记录当前选中的文本范围（Range对象）：

let selectedTextRange = null;

// 监听选中文本的变化
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  // 仅处理单个选中范围的情况（大部分场景都是单范围选中）
  selectedTextRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
});

2. 监听点击事件并判断位置 #

在点击事件中，获取点击坐标，再对比该坐标是否落在选中区域的矩形范围内：

document.addEventListener('click', (e) => {
  if (!selectedTextRange) return;

  // 获取点击的视口坐标（与getClientRects的坐标系匹配）
  const clickX = e.clientX;
  const clickY = e.clientY;

  // 获取选中区域的所有行级矩形（处理多行文本选中的情况）
  const selectedRects = selectedTextRange.getClientRects();
  
  let isClickInSelectedArea = false;
  // 遍历每个矩形，判断点击是否在其中任意一个范围内
  for (const rect of selectedRects) {
    if (
      clickX >= rect.left && clickX <= rect.right &&
      clickY >= rect.top && clickY <= rect.bottom
    ) {
      isClickInSelectedArea = true;
      break;
    }
  }

  // 这里替换成你的业务逻辑，比如执行对应操作
  console.log(isClickInSelectedArea ? '点击命中选中区域' : '点击未命中选中区域');
});

关键细节说明 #

• 多行文本处理：用getClientRects()而非getBoundingClientRect()，前者会返回选中区域每一行的实际矩形，避免因多行包围盒包含空白区域导致的误判。
• 坐标系统一：getClientRects()返回的是相对于视口的坐标，因此使用事件的clientX/clientY与之匹配；若需用文档坐标（pageX/pageY），则需给矩形坐标加上当前滚动偏移（window.scrollX/window.scrollY）。
• 失效处理：当用户取消选中、编辑文本或页面内容变化时，需重新获取选中范围，避免使用失效的Range对象。
• 特殊元素兼容：对于SVG、Canvas内的文本或富文本编辑器，需结合对应元素的Selection机制调整逻辑。

内容的提问来源于stack exchange，提问作者Chris