如何防止每次输入后触发选择事件？答案

【问题标题】：How to prevent select event from firing after every input?如何防止每次输入后触发选择事件？
【发布时间】：2021-11-25 23:47:11
【问题描述】：

我正在尝试在 React 中创建一个自定义文本编辑器，因此我创建了一个具有 contentEditable 属性的 div。现在我想在用户选择输入文本的一部分时执行一些操作。为此，我在我的 div 上使用 select 事件作为 onSelect 属性。问题是，select 事件不仅在选择文本时运行，而且在我单击输入框或任何输入后运行。如何防止它，以便仅在选择文本时触发它？

组件：

function EditorBody(props) {
  return (
    <div className="editor-body">
      <div
        className="text-section"
        contentEditable
        role="textbox"
        placeholder="Text goes here ..."
        onSelect={() => window.alert("You've selected a text")} // Runs after every input, not only when the text is selected
      ></div>
    </div>
  );
}

export default EditorBody;

【问题讨论】：

当您说“用户选择了输入文本的一部分”时，您是指突出显示文本，还是只是将光标放在某个特定文本附近的某处？
@silencedogood，是的，我的意思是突出显示它
这能回答你的问题吗？ Select Text & highlight selection or get selection value (React)
@silencedogood 不幸的是，并非如此。我的问题是即使在每次输入之后都会触发事件，而通常情况下它不应该触发。
嗯...正如该答案指出的那样，如果您希望选择突出显示的文本，我认为在这里使用 onMouseUp 将是一个更合适的事件。使用此事件，您可以检查选择是否大于零。如果是，请运行您的选择方法。如果没有，什么也不做。

标签： javascript reactjs select textbox contenteditable

【解决方案1】：

您可以更改onSelect 中的逻辑，以便能够确定是否执行所选逻辑。

onSelect={(event) => {
  if (document.getSelection().toString().length > 0) {
     // your selection logic
     window.alert(document.getSelection().toString());
  }
}}

这样，只有当用户选择某些东西而不是其他可能引发次要选择事件（焦点、按键等）的主要事件时，才会执行逻辑。

【讨论】：

这个变通方法实际上非常好。非常感谢。顺便说一句，我刚刚发现在 React 中没有触发 mouseUp 和 mouseDown 事件。也许您也知道解决此问题的任何方法？
@seymurium 很高兴它有效！在反应中，您实际上不使用mouseUp 或mouseDown，您将使用onMouseUp 和onMouseDown。
对不起，我实际上是指 onMouseUp 和 onMouseDown。他们没有因为某种原因被解雇
@seymurium 你会碰巧在堆栈上有另一个问题/代码示例吗？有很多原因可能导致它们出现错误，但我在此问题的代码中看不到它们的任何用途
伙计，不知道怎么做，但现在他们开始工作了，哈哈：D 感谢您的讨论！