当contentEditable div中存在选择内容时，如何触发事件？

Question

当用户在contentEditable div中选择一些文本/元素时，我想触发一个事件。 因此，我想停用RTF编辑器中的某些按钮。

根据内容的更改可以触发一些事件。 当用户选择一些内容时，我只想要一个事件。

Answer 1

您可以将事件侦听器添加到mouseup事件的元素，然后从window获取选择：

  <div contenteditable="true" id="editableDiv">Some content</div>

和js：

  document.getElementById("editableDiv").addEventListener("mouseup", function() {
    var s = window.getSelection();
    if(s == "something"){
       //do your thing
    }
  }, false);

Answer 2

一个相对简化的版本可能看起来像这样，根据您的需要，您可能需要处理不支持window.getSelection()浏览器，如旧IE等。

 const handleSelection = function() { const btn = document.querySelector('#btn'); let selection = window.getSelection().anchorNode.textContent .substring( window.getSelection().extentOffset, window.getSelection().anchorOffset ); if (selection.length !== 0) { btn.setAttribute('disabled', true); } else { btn.removeAttribute('disabled'); } }; ['mouseup', 'keyup', 'selectionchange'].forEach((e) => { document.querySelector('#editable').addEventListener(e, handleSelection); }); 

 #btn[disabled] { cursor: default; opacity: 0.3; } 

 <button type="button" id="btn">Button (disabled when something is selected)</button> <div id="editable" contenteditable> <p>I'm some content that is editable!</p> </div>