JavaScript

【JavaScript】dblclickイベントとは?マウスがダブルクリックされた時に処理を行う

後輩ちゃん
後輩ちゃん
先輩!今日は何を教えてくれるんですか?
先輩くん
先輩くん
今日は、JavaScriptのダブルクリックイベントの使い方について教えるよ!
後輩ちゃん
後輩ちゃん
よろしくお願いします!

ダブルクリックイベントとは、その名の通りユーザーがボタンなどをダブルクリックした時に実行されるイベントを指します。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

ダブルクリックイベントの使い方

ダブルクリックイベントは「addEventListenerメソッドにdblclickを指定する」「ondblclickプロパティ」「ondblclick属性」の3つの書き方があります。 使い方をそれぞれ別々に解説していきます。

addEventListenerメソッドを使ったdblclickイベントの書き方

addEventListenerメソッドを使ってdblclickイベントを登録する時の書き方は以下の通りです。
const elem = document.getElementById('btn'); // トリガーになる要素を取得

elem.addEventListener('dblclick',function(){
  // ダブルクリックイベントの処理を記述
})

まず始めにダブルクリックイベントのトリガーとなる要素を取得します。
続いて、取得した要素にaddEventListenerメソッドを使い第一引数に「dblclick」を指定し、第二引数に指定した関数内にダブルクリックイベントが実行された時に処理したい内容を記述します。

先輩くん
先輩くん
dblclickを使ったサンプルコードは以下の通りです。


上記サンプルで表示されているボタンをダブルクリックすると、「ダブルクリックされました」のテキストが追加されます。

ondblclickプロパティの書き方

ondblclickプロパティを使ってダブルクリックイベントを登録する時の書き方は以下の通りです。
const elem = document.getElementById('btn'); // トリガーになる要素を取得

elem.ondblclick = function(){
  // ダブルクリックイベントの処理を記述
};

まず始めにaddEventListenerメソッドを使ってダブルクリックイベントを登録する時の書き方と同様に、トリガーとなる要素を取得します。
続いて、取得した要素にondblclickプロパティを使い関数を代入します。代入した関数にダブルクリックイベントが実行された時に処理したい内容を記述します。

先輩くん
先輩くん
ondblclickプロパティを使ったサンプルコードは以下の通りです。


上記サンプルの処理は、addEventListenerメソッドを使ったものと同様で表示されているボタンをダブルクリックすると、「ダブルクリックされました」のテキストが追加されます。

ondblclick属性の書き方

ondblclick属性を使ってダブルクリックイベントを登録する時の書き方は以下の通りです。
<タグ ondblclick="dblclickEvent()">テキスト</タグ>

HTMLタグにondblclick属性を追加し、呼び出したい関数を設定します。続いて、ondblclick属性に設定した関数を定義しダブルクリックイベントが実行された時に処理したい内容を記述します。

先輩くん
先輩くん
ondblclick属性を使ったサンプルコードは以下の通りです。


上記サンプルの処理は、addEventListenerメソッドとondblclickプロパティと同様で表示されているボタンをダブルクリックすると、「ダブルクリックされました」のテキストが追加されます。

addEventListenerメソッドのdblclickイベントとondblclickプロパティの違い

後輩ちゃん
後輩ちゃん
ダブルクリックイベントの3種類の書き方について理解できたのですが、addEventListenerメソッドとondblclickプロパティの違いはなんですか?
先輩くん
先輩くん
大きな違いとしてイベントを複数登録できるか、できないかの違いがあるよ!
これについては別記事で詳しく解説しているから興味のある方は下記のURLを参考にしてね!

まとめ

今回はJavaScriptのダブルクリックイベントの使い方について解説しました。
最後にポイントを軽くおさらいしましょう。

ポイント

  • ダブルクリックイベントの登録には、addEventListenerメソッドの第一引数にdblclickを指定する方法、ondblclickプロパティを使う方法、ondblclick属性を使う方法の3種類がある
  • addEventListenerメソッドの第一引数にdblclickを指定する方法とondblclickプロパティを使う方法の違いは、複数のイベントを登録できるか、できないか

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村