Javascript 如何在 Select 文本时停止Click事件

发布于02月23日

我在Reaction中有一款TODO应用程序.当我在应用程序中点击<h2>项时.它会将其带到编辑模式.但当我try 从<h2>中 Select 文本时，它仍然进入编辑模式.我不希望这种事发生.我如何才能阻止这种情况的发生？我认为window.getSelection()不起作用，因为点击首先被注册，然后发生 Select .因此，当注册点击时，它没有选定的文本.

以下是该问题的必要代码块:

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

function editTodo(index) {
  if(window.getSelection().toString()!=='')
    setList(list.map((x, i) => { if (i !== index) { return x } else { return { ...x, edit: true } } }))
}

如你所见，我试了window.getSelection()次，但不起作用

推荐答案

判断所选内容的type是否为"范围".如果是，请不要更新状态:

document.getSelection().type === 'Range'

工作示例:

const { useState } = React;

const Demo = () => {
  const [edit, setEdit] = useState(false);
  
  function editTodo(index) {
    if (document.getSelection().type === 'Range') return;
    
    setEdit(true)
  }

  return (
    <div>
      <h2 
        onClick={() => editTodo()}
        onSelectStart={e => stopPropogation()}
        >text</h2>
      <div>Edit: {JSON.stringify(edit)}</div>
    </div>
  )
}

ReactDOM
  .createRoot(root)
  .render(<Demo />)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

此外，您的editTodo函数有点麻烦，您可以让它更简洁一些(请参见代码中的注释):

function editTodo(index) {
  if(document.getSelection().type === 'Range') return; // bail out 

  setList(prevList => // use an updater functio get the previous state
    prevList.map((x, i) => // use an arrow function to avoid the need for explicit return
      i !== index // use a ternary instead of if/else
        ? x
        : { ...x, edit: true }
    )
  )
}