在文本突出显示事件？

Question 1

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

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

Question 2

没有任何onhighlightext类似的东西，但是一个解决方案是绑定onmouseup以检查是否在input/中没有选择任何文本textarea。

编辑

这是您的实现示例。我仅在Chrome / Firefox / IE7中对此进行了测试。这同样适用于输入。

http://jsfiddle.net/qY7gE/

来自JSFiddle的代码：

var t = '';
function gText(e) {
    t = (document.all) ? document.selection.createRange().text : document.getSelection();

    document.getElementById('input').value = t;
}

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

<input type='text' id='input' />
In software, a stack overflow occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When too much memory is used on the call stack the stack is said to overflow, typically resulting in a program crash.[1] This class of software bug is usually caused by one of two types of programming errors.[2]

展开摘要

Question 3

晚会晚了一点，以备将来参考...

看一下MDN上的selectDOM事件。

释放鼠标或键时，它将触发（至少在Chrome 40中为）。

document.addEventListener('select', callback);

Question 4

进行/更改文本选择时存在一个本机事件。在大多数浏览器（包括IE）上 selectionchange都具有基本支持，并且不仅适用于表单元素，而且适用于文档中的任何文本。

document.addEventListener("selectionchange",event=>{
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
})

select this text

展开摘要

注意，顾名思义，它会在选择的任何更改时触发。因此，在选择文本时，您将获得对回调函数的多次调用。

Question 5

我建议您监听mouseup事件，而不是selectionchange，因为后者会触发很多事件（取决于所选字符），您必须等待任意时间才能获得最终选择。同上@Robert和@Makyen，我创建了一些代码供您播放：

<!DOCTYPE html>
<html>
<body>
  <div onmouseup="showSelection()">
    <p>Select some of the text. You can also listen to the mouseup event at the &lt;p&gt; level</p>
    <p>Anthoer paragraph and text</p>
    <input type="text" value="Hello world!" onselect="showSelection()">
  </div>
  Outside of div, selection won't work as there is no listener if you don't uncomment the line: document.onmouseup = showSelection
  
  <script>
  // document.onmouseup = showSelection // listen to the mouseup event at document level
  
  function showSelection() {
    console.log('Selection object:', window.getSelection()) // same as document.getSelection()
    console.log('Selected text:', window.getSelection().toString())
  }
  </script>
</body>
</html>

展开摘要

Question 6

我认为@ patrick-evans有正确的答案。这很容易成为最具有远见和API支持的答案-您只需要对事件进行反跳即可停止洪水泛滥。

我无法发布回复，但是请考虑一下

function debounce(fn, delay) {
  let timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

document.addEventListener("selectionchange", debounce(function (event) {
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
}, 250));

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad est veniam facere culpa expedita optio iste labore doloremque autem illo, in voluptatibus error ea, ab reprehenderit placeat facilis animi iure?

展开摘要

Question 7

使用mouseup技巧的解决方案不是正确的解决方案。那是一种怪诞的方式，而不是完美的。效率也降低了，因为您现在要捉住老鼠般的胡扯。

在Firefox插件中执行此操作的真正方法是使用addSelectionListener参阅本主题：观察突出显示？

现在，即使用户使用键盘进行选择，它也会被捕获。

感谢Neil向我提示了如何在MXR上找到它