JS--dblclickイベント

dblclickイベント：マウスがダブルクリックされたとき

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【dblclick イベントについて】
dblclick イベントはマウスのカーソルが要素の上にある状態で、マウスが極めて短い間隔で二回クリックされた時に発生するイベントです。 ondblclick 属性または ondblclick プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として dblclick を指定してイベントリスナーを登録できます。

【dblclickイベントの使い方】
Element オブジェクトで発生します。

イベントの種類 : MouseEvent
バブリングの可否 : 可能
キャンセルの可否 : 可能

1.要素の属性値にイベントハンドラを登録する場合はondblclick 属性を使う

2.ondblclikプロパティを使う場合
イベントハンドラーにコールバック・無名関数・アロー関数を使う

3.イベントリスナーを使う場合
addEventListener メソッドを使って、イベントリスナーを登録する。1 番目の引数に 'dblclick' を指定し、2番目の引数にハンドラーを指定する。ハンドラーには、コールバック関数・無名関数・アロー関数式のいずれかを用いる。

4.イベントハンドラー関数に引数を用いた時
イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。

サンプルコード

ブラウザを立ち上げた

【clickイベントとdblclickイベントの関係】
click イベントと dblclick イベントは共にマウスがクリックされたときに発生するイベントです。
他にも同じようなイベントとしてマウスが押された時に発生する mousudown イベントと、マウスが離された時に発生する mouseup イベントがあります

同じ要素に対して click イベントと dblclick イベントのイベントリスナーを登録した上でマウスを短い間隔でクリックすると、 click イベントが 2 回発生したあとで dblclick イベントが発生します。

ブラウザを立ち上げ、クリックする
nput 要素には click イベントと dblclick イベントのイベントリスナーが登録されています。画面に表示されている input 要素を短い間隔でクリックすると、 click イベントのイベントリスナーが二回呼び出されたあとに dblclick イベントのイベントリスナが―呼び出されます。

クリックする

ダブルクリックする