在Javascript中选择的文本事件触发器

Question

这可能听起来像一个新手问题,但我想知道当有人使用鼠标在页面上选择给定的文本片段时,我如何触发自定义JavaScript函数.还有什么方法可以在网页上找到所选文字的位置？

更新:为了更清楚,文本片段可以是句子或单词或短语或整个段落的一部分.

Answer 1

没有" 文本被选中 " (DOM)事件,但您可以将mouseup事件绑定到document.body.在该事件处理程序中,您可以只检查

document.selection.createRange().text

要么

window.getSelection()

方法.Stackoverflow上有几个主题,比如这个javascript来获取网页中所选文本的段落.

我不确定你对"找到位置"是什么意思,但是为了留在我的示例世界,你可以使用event propertysfor X + Y鼠标位置.

示例:http://www.jsfiddle.net/2C6fB/1/

Answer 2

这是一个快速的混搭:

$('div').mouseup(function() {
    var text=getSelectedText();
    if (text!='') alert(text);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}?

<div>Here is some text</div>

演示:http://jsfiddle.net/FvnPS/11/

Answer 3

有一个新的实验API可以解决这个问题:

当修改文档的选择对象时,或者当与a <input>或a 相关联的选择<textarea>发生更改时,将触发Selection API的selectionchange事件.在第一种情况下,在第二种情况下的元素上触发selectionchange事件.

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

请注意,这是最前沿的,并不能保证甚至可以在主流浏览器中使用.

Answer 4

我不确定鼠标的事情，但这条线适用于移动设备，每次对文本选择进行更改时都会调用 -

document.addEventListener('selectionchange', () => {

});