スポンサーリンク
スポンサーリンク

ダブルクリックされたことを感知するdblclick()

jQuery

特定の要素がダブルクリックされたときに、
何かしらの処理を実行したい場合は、
dblclick()を使用します。書き方はclick()と同様で、
function(){…}を書いて、その中に実行したい処理を書きます。

サンプルコードでは、ボタンがクリックされたら
白猫の画像を黒猫に切り替える処理をしています。

画像が切り替わった後、F12を押して、「Elements」タブで
HTMLを確認すると、src属性の値と、alt属性の値が変更されて
いることが家訓できます。

実行結果はこちらです。

a要素に設定したdblclick()が動かないんだけど

a要素にclickイベントを設定するときは、
もともとのa要素のリンクの無効にするために、
click(function(){…})内の最後にreturn false;を書きました。

ですが、dblclick()の場合はreturn false;を書いても、
動作がうまくいきません。dblclick()に設定した処理は
ダブルクリックされたら、処理が実行されます。

一方、ユーザーがダブルクリックのつもりでクリックした
1回目のクリックの後にclickイベントを感知し、
a要素のリンクの処理が実行されてしまいます。

そこで、a要素にdblclick()を設定したい場合、
メソッドチェーンを使用して、click()とdblclick()の
両方にイベント処理を追加します。

dblclick()にはダブルクリック時に実行したい処理を、
click()にはreturn false;を設定すれば、1回目のクリック時の
リンクを無視できます。

↓こんな感じです。

コメント

タイトルとURLをコピーしました