在文本突出显示事件？

Question

我很好奇，如果有人知道/一旦用户完成网页上的文本选择，该如何触发函数运行？我希望用户能够选择文本，并在短暂的延迟后（或立即，此时无所谓）在文本附近出现一个叠加按钮，用户可以单击该按钮，然后我返回并运行我的更多基于选择的代码。这是用于Firefox扩展。

我可以想到的一个类似示例就像在IE中一样，您可以在其中选择文本，然后显示“ Web加速器”。我99％确信我知道如何实际覆盖按钮并获取所选文本的位置，但是我不知道如何在不进行某种无限循环的情况下检查是否有选中的内容似乎是一个可怕的主意。

编辑：

//In my overlay.js with the rest of my sidebar code

isTextSelected: function () {   

        var myText = cqsearch.getSelectedText();

        var sidebar = document.getElementById("sidebar");

        var sidebarDoc = sidebar.contentDocument || document;

        var curHighlightedDiv = sidebarDoc.getElementById("testDiv");

        curHighlightedDiv.innerHTML = "Current text selection:" + myText;

    }

};

//In my on firefox load function I added this

document.onmouseup = cqsearch.isTextSelected;

因此，这就是我根据罗伯特的建议得出的，我花了一些时间将所有内容都放在正确的位置，但是效果很好！现在定位我的按钮。

Answer 1

晚会晚了一点，以备将来参考...看一下MDN上的selectDOM事件。释放鼠标或按键时，它将触发（至少在Chrome 40中为）。document.addEventListener('select', callback);

Answer 2

进行/更改文本选择时有一个本机事件。在包括IE在内的大多数浏览器上selectionchange都有基本的支持，并且不仅适用于表单元素，而且适用于文档中的任何文本。document.addEventListener("selectionchange",event=>{  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;  console.log(selection);})select this text注意，顾名思义，它会在选择的任何更改时触发。因此，在选择文本时，您将获得对回调函数的多次调用。