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

Для такой страницы

http://www.answers.com

если пользователь дважды щелкнет любое слово на странице, появится всплывающее окно с определением этого слова.

Я могу придумать способ использовать сценарии DOM, чтобы разбить все слова на странице, а затем сделать так, чтобы каждое из них помещалось в отдельный элемент "span"... но в противном случае не правда ли, что если весь текст находится под элемент "p", то узел элемента "p" срабатывает для обработки события двойного щелчка, но нет простого способа определить, какое слово было нажато?


person nonopolarity    schedule 18.05.2009    source источник
comment
Хороший вопрос, удобный функционал, буду следить за этим вопросом   -  person The real napster    schedule 18.05.2009


Ответы (2)


Вы просто добавляете событие двойного щелчка ко всему документу, например:

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 или что-то в этом роде. Это зависит от того, что двойной щелчок по слову выделяет его в браузерах. Честно говоря, не совсем уверен, что именно так и делает answer.com.

person Paolo Bergantino    schedule 18.05.2009
comment
Побей меня несколько минут. Я хотел предложить то же самое. +1 - person Jose Basilio; 18.05.2009
comment
Извините, проблема заключалась в том, что определяемая пользователем функция getSelection затирает window.getSelection. Простое решение — просто переименовать пользовательскую функцию. - person ; 25.05.2010
comment
Не могли бы вы объяснить необходимость двух других условий if? Я предполагаю, что разные браузеры обрабатывают такие вещи по-разному, так ли это? - person ; 27.05.2010
comment
@misterMatt Да, эта функция охватывает все способы получения выделенного текста в разных браузерах. - person Paolo Bergantino; 27.05.2010

Вот, пожалуйста, статья в блоге, в которой описывается, как это сделать с помощью jQuery. Его тестовая реализация похожа на то, что вы хотите. А именно, двойной щелчок по слову подтягивает определение из словаря:

Использование jQuery и двойной клик для получения данных

person Praveen Angyan    schedule 18.05.2009