我很好奇是否有人知道如果/当用户完成在网页上选择文本后我将如何触发函数运行？我希望用户能够选择文本，并在短暂的延迟（或立即，此时无关紧要）后，文本附近会出现一个覆盖按钮，然后用户可以单击该按钮然后返回并运行我的更多代码基于选择。这适用于Firefox扩展。
我能想到的一个类似的例子就像在IE中你可以选择文本然后它会带来“网络加速器”。我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;
所以这就是我用罗伯特提出的建议，我花了一些时间把所有东西都放在正确的位置，但效果很好！现在来定位我的按钮。
没有任何onhighlightext或类似的东西，但解决方案是绑定onmouseup以检查是否有任何文本被选中，如果这不是在input / textarea。
这是一个实现示例。我只在Chrome / Firefox / IE7中测试过这个。这也适用于输入。
来自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]派对有点晚，但供将来参考......
看看select上的MDN DOM事件。
一旦释放鼠标或键，它就会触发（至少在Chrome 40中）。
document.addEventListener('select', callback);
在进行/更改文本选择时有一个本机事件。 selectionchange有basic support on most browsers, including IE，并且适用于文档中的任何文本，而不仅仅是表单元素。
document.addEventListener("selectionchange",event=>{
let selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString() ;
console.log(selection);
})select this text请注意，顾名思义，它会触发选择的任何更改。因此，当您选择文本时，您将获得对回调函数的多次调用。
我建议听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 <p> 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>我认为@ patrick-evans有正确的答案。它很容易成为forward-thinking and API supported最常见的答案 - 你只需要去除该事件以阻止洪水泛滥。
我无法发布回复，但请考虑一下
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?使用mouseup技巧的解决方案不是正确的解决方案。这是一种hacky方式，并不完美。效率也不高，因为你现在正在捕捉如此多的垃圾。
在Firefox插件中实现它的真正方法是使用addSelectionListener看到这个主题：Observe for highlight?
现在即使用户使用键盘进行选择，它也会被捕获。
感谢Neil让我知道在MXR上找到它的地方
只需处理mouseup事件，因为用户在突出显示后“松开”键：
香草JS
//Directly within element
<p class='my_class' onmousedown="my_down_function()" onmouseup="my_up_function()">
//On element
my_element = document.querySelector('.my_class');
my_element.onmousedown = function (e) { my_down_function(e); };
my_element.onmouseup function (e) { my_up_function(e); };
jQuery的
$('.my_class').mousedown(function() {
my_down_function()
})
$('.my_class').mouseup(function() {
my_up_function()
})
AZLE
az.add_event('my_class', 1, {
"type" : "mousedown",
"function" : "my_down_function()"
})
az.add_event('my_class', 1, {
"type" : "mouseup",
"function" : "my_up_function()"
})