備忘録的プログラミングリファレンス

dblclick ( ondblclick ) イベント

MouseEvent

 dblclick ( ondblclick ) イベントは、設定されたオブジェクトでダブルクリックしたら発生するMouseEventインターフェイスのイベントです。 ダブルクリックはマウスボタンを2階連続でクリックする操作のことです。

ダブルクリックイベントをイベントハンドラーとして追加
document.getElementById('example').addEventListener("dblclick", (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

 同じようなイベントに onclick イベントハンドラーがあります。alert() メソッドを使う場合には、このonclick イベントハンドラーも併せて設定すると常に click イベントを捉えているようにみえることに注意が必要です。詳しくは Example を参照してください。

 dblclick がイベントタイプ、ondblclick がイベントハンドラーです。イベントハンドラーによって、そのイベントを監視します。
 イベントタイプは event.type で取得することができます。

構文(Syntax)

in HTML

<tagelement ondblclick="function()">

in JavaScript

object.ondblclick = function(){ };

object.addEventListener("dblclick", script_);

備考(Remarks)

BubblesYes
CancelableYes
InterfaceMouseEvent
Supported HTML ElementsALL HTML elements

Example

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

 同じようなイベントに onclick イベントハンドラーがあります。 alert() メソッドのような動作では、この onclick イベントハンドラーも併せて設定すると、常に click イベントだけを捉えているようにみえます。
 しかし、開発用のコンソールを確認してみてください。クリックとダブルクリックのイベントが同時に捉えられています。クリック側の関数で単位時間内に2回以上イベントを捉えたらキャンセルするなどの対処が必要になるかもしれません。