鼠标点击事件中如何获取点击位置在对应文本字符串的索引？

可以通过浏览器原生的光标定位API实现该需求，不需要手动计算坐标，适配性和准确率都更高，核心代码如下：

const mainDiv = document.getElementById('mainDiv');
mainDiv.addEventListener('click', (e) => {
  let caretPos;
  // 兼容不同浏览器的光标定位API
  if (document.caretPositionFromPoint) {
    caretPos = document.caretPositionFromPoint(e.clientX, e.clientY);
  } else if (document.caretRangeFromPoint) {
    const range = document.caretRangeFromPoint(e.clientX, e.clientY);
    caretPos = {
      offsetNode: range.startContainer,
      offset: range.startOffset
    };
  }
  if (!caretPos) return;

  // 判断节点类型，拿到被点击的元素
  const clickElement = caretPos.offsetNode.nodeType === Node.TEXT_NODE 
    ? caretPos.offsetNode.parentElement 
    : caretPos.offsetNode;
  // 仅处理目标div下的span元素
  if (clickElement.tagName === 'SPAN' && mainDiv.contains(clickElement)) {
    const textIndex = caretPos.offset;
    console.log('被点击的span：', clickElement);
    console.log('点击在文本中的索引：', textIndex);
    console.log('对应位置字符：', clickElement.textContent[textIndex]);
  }
})

逻辑说明 #

• 点击事件触发后，直接调用原生API根据点击坐标获取对应文本节点的偏移量，该API本身就是浏览器用来处理输入框光标定位的能力，完全复用原生排版计算逻辑
• 对返回的节点做类型判断，如果是文本节点，父元素即为被点击的span
• 校验元素归属正确后，返回的offset就是点击位置在对应span文本中的0起始索引，和JS字符串索引规则完全一致

方案优势 #

不需要手动计算字符宽度、适配字体/字间距/换行/页面缩放等复杂的排版规则，实现成本低，准确率远高于手动计算坐标的方案，主流浏览器都支持。

注意事项 #

• 索引计算规则为：点击在第n个字符左侧就返回n，比如点击在Some的S左侧返回0，点击在S和o之间返回1
• 如果点击到span之间的空白区域，可以根据业务需要补充最近元素查找逻辑做兼容处理。

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