dblclick ( ondblclick ) イベント
MouseEvent
dblclick ( ondblclick ) イベントは、設定されたオブジェクトでダブルクリックしたら発生するMouseEventインターフェイスのイベントです。 ダブルクリックはマウスボタンを2階連続でクリックする操作のことです。
document.getElementById('example').addEventListener("dblclick", (event)=>{ console.log( 'event type : ' + event.type ); });
同じようなイベントに 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)
Bubbles | Yes |
Cancelable | Yes |
Interface | MouseEvent |
Supported HTML Elements | ALL HTML elements |
Example
同じようなイベントに onclick イベントハンドラーがあります。
alert() メソッドのような動作では、この onclick イベントハンドラーも併せて設定すると、常に click イベントだけを捉えているようにみえます。
しかし、開発用のコンソールを確認してみてください。クリックとダブルクリックのイベントが同時に捉えられています。クリック側の関数で単位時間内に2回以上イベントを捉えたらキャンセルするなどの対処が必要になるかもしれません。
関連(Related)
HTML、CSS、DOMのマウス、キーボード、タッチデバイス、カーソルに関する用途一覧です。
HTML
CSS
DOM
- 全般
-
- インターフェイス
- UiEvent
- イベント
- which
- プロパティ
- altKey、 ctrlKey、 metaKey、 relatedTarget、 shiftKey
- メソッド
- getModifierState()
- マウス
-
- インターフェイス
- DragEvent、 MouseEvent
- イベント
- click、 contextmenu、 dblclick、 dragend、 dragenter、 dragleave、 dragover、 dragstart、 drop、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 show、 onwheel
- プロパティ
- button、 buttons、 clientX、 clientY、 code、 deltaMode、 deltaX、 deltaY、 deltaZ、 pageX、 pageY、 screenX、 screenY
- メソッド
- キーボード
- タッチデバイス
-
- インターフェイス
- TouchEvent
- イベント
- touchcancel、 touchend、 touchmove、 touchstart、 transitionend
- プロパティ
- メソッド