のようなページの場合
ユーザーがページ内の任意の単語をダブルクリックすると、ポップアップ ボックスが表示され、その単語の定義が表示されます。
DOM スクリプトを使用してページ内のすべての単語を分割し、それぞれを個別の「スパン」要素の下に配置する方法を考えることができます...しかし、そうでなければ、すべてのテキストが「p」要素の場合、「p」要素ノードがトリガーされてダブルクリック イベントが処理されますが、どの単語がクリックされたかを簡単に知る方法はありませんか?
のようなページの場合
ユーザーがページ内の任意の単語をダブルクリックすると、ポップアップ ボックスが表示され、その単語の定義が表示されます。
DOM スクリプトを使用してページ内のすべての単語を分割し、それぞれを個別の「スパン」要素の下に配置する方法を考えることができます...しかし、そうでなければ、すべてのテキストが「p」要素の場合、「p」要素ノードがトリガーされてダブルクリック イベントが処理されますが、どの単語がクリックされたかを簡単に知る方法はありませんか?
次のように、ドキュメント全体にダブルクリック イベントを追加するだけです。
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 のやり方とまったく同じかどうかはよくわかりません。
これは、jQuery を使用してこれを行う方法を説明するブログ記事です。彼のテスト実装は、あなたが望むものに似ています。つまり、単語をダブルクリックすると、辞書から定義が引き出されます。