如何防止 select 事件在每次输入后触发？

Question

我正在尝试在 React 中创建自定义文本编辑器，因此我创建了一个 div，它具有 contentEditable 属性。现在我想在用户选择输入文本的一部分时执行一些操作。为此，我将 select 事件用作 div 上的 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;

Answer 1

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

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

这样，仅当用户正在 select 执行某些操作时才会执行逻辑，而不会在可能引发次要 select 事件（焦点、按键等）的其他主要事件上执行。

如何防止 select 事件在每次输入后触发？

How to prevent select event from firing after every input?

javascript

reactjs

select

textbox

contenteditable