ウェブページ上の単語をクリックまたはダブルクリックしてイベントハンドラをトリガする方法は？</p> <p><a href="http://www.answers.com" rel="noreferrer">http://www.answers.com</a></p> <p>ようなページのための

Question

ページ内の任意の単語でユーザーをダブルクリックすると、ポップアップボックスが現れて、その単語の定義を示しています。

DOMスクリプトを使ってページ内のすべての単語を分割し、それぞれを別々の「スパン」要素の下に置く方法を考えることもできますが、そうでない場合は、テキストが "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またはそのような何かにセレクタを変更します。これは、単語をダブルクリックするとブラウザでハイライト表示されるという事実に左右されます。 answer.comが正直なところでそれをしているかどうかは分かりません。

Answer 2

ここでは、jQueryを使用してこれを行う方法を説明するブログ記事を掲載します。彼のテスト実装は、あなたが望むものに似ている、すなわち、辞書から定義を引き上げる単語をダブルクリック：

Using jQuery and Double clicks to get data