React表格行点击与文本选中冲突现象原因咨询

你的getSelectionWithoutClick函数逻辑是只有页面无文本选中时才执行原点击事件，出现两种不同现象的核心是浏览器处理「文本选中」和「点击事件」的默认行为差异：

点击同一选中单元格时 #

选中文本后点击同一单元格的选中区域：

• 浏览器不会自动清除现有选中的文本
• 此时getSelection()?.toString()能拿到选中内容，!getSelection()?.toString()不成立，原点击事件就不触发
• 直到你点击空白处清掉选中状态，getSelection()为空，点击事件才会生效

点击其他单元格（含同行）时 #

点击另一个单元格时：

• 浏览器会先清除之前的文本选中状态，再处理点击事件
• 你的函数执行时，选中内容已经被清掉，getSelection()?.toString()为空，条件满足，原点击事件就触发了

额外优化建议 #

如果要实现「只要有文本选中，不管点哪个单元格都不触发行点击」，得调整逻辑：判断点击的目标是否在选中区域内，而不是只看有没有选中文本。示例代码：

const getSelectionWithoutClick = (originalHandler: () => void, event: MouseEvent) => {
  const selection = window.getSelection();
  if (!selection || !selection.toString()) {
    originalHandler();
    return;
  }
  // 检查点击目标是否处于选中范围内
  const range = selection.getRangeAt(0);
  const isClickInSelection = range.containsNode(event.target as Node, true);
  if (!isClickInSelection) {
    originalHandler();
  }
};

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