React Todo应用：选中H2文本时如何阻止触发点击事件？

你说得没错，onClick事件会在文本选中操作完成前触发，所以此时window.getSelection()无法获取到选中内容，导致判断逻辑失效。可以试试下面几种实用方案：

方案一：延迟检查选中内容 #

利用setTimeout把选中内容的检查延迟到当前事件循环结束后执行，此时文本选中操作已经完成：

<h2 onClick={() => editTodo(index)}>{t.text}</h2>

function editTodo(index) {
  setTimeout(() => {
    const selectedText = window.getSelection().toString();
    if (selectedText === '') { // 仅当无选中文本时触发编辑
      setList(list.map((x, i) => 
        i !== index ? x : { ...x, edit: true }
      ));
    }
  }, 0);
}

setTimeout(..., 0)会让回调在当前所有同步任务执行完毕后运行，这时就能正确获取到选中的文本内容了。

方案二：通过鼠标事件区分点击与选中文本 #

如果觉得延迟方案不够直观，可以监听mousedown和mouseup事件，通过时间差判断操作类型——短时间内完成的操作判定为点击，长时间则判定为选中文本：

let clickStartTime;

<h2 
  onMouseDown={() => clickStartTime = Date.now()}
  onMouseUp={() => {
    const clickDuration = Date.now() - clickStartTime;
    if (clickDuration < 200) { // 阈值可根据需求调整
      editTodo(index);
    }
  }}
>
  {t.text}
</h2>

function editTodo(index) {
  setList(list.map((x, i) => 
    i !== index ? x : { ...x, edit: true }
  ));
}

这种方法能精准区分点击和选中文本的操作，避免延迟带来的微小感知差。

方案三：禁用文本选中（可选） #

如果你的场景不需要用户选中文本，也可以直接禁用h2的文本选中功能：

<h2 
  onClick={() => editTodo(index)}
  style={{ userSelect: 'none' }}
>
  {t.text}
</h2>

注意这个方案会完全禁止文本选中，仅适用于不需要用户复制文本的场景。

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