如何点击或双击网页上的单词来触发事件处理程序？

Question

对于像这样的页面

http://www.answers.com

如果用户双击页面中的任何单词,将弹出一个弹出框并显示该单词的定义.

我可以想到一种方法来使用DOM脚本分解页面中的所有单词,然后让它们中的每一个都在一个单独的"span"元素下...但是否则如果所有文本都在"p"元素,然后"p"元素节点被触发来处理双击事件,但没有简单的方法来告诉单击哪个单词？

Answer 1

您只需向整个文档添加双击事件,如下所示:

function get_selection() {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (document.getSelection) {
        txt = document.getSelection();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    return txt;
}

$(document).dblclick(function(e) {
    var t = get_selection();
    alert(t);
});

如果您只希望这对选择的段落起作用,您可以将选择器更改为p.myclass类似的东西.这取决于双击一个单词在浏览器中突出显示的事实.说实话,不确定它是否确实是answers.com的做法.

Answer 2

在这里,一篇博客文章描述了如何使用jQuery执行此操作.他的测试实现类似于你想要的,即双击一个单词从字典中提取定义:

使用jQuery和Double单击来获取数据