Как сделать щелчок или двойной щелчок по слову на веб-странице, чтобы вызвать обработчик события?

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 и двойных кликов для получения данных