Zenn
💯

【Javascript】トリプルクリックを実装したい😭⇦A.簡単に実装できます（任意の回数も可能です！🤗）

2022/09/04に公開
JavaScript
メモ
tech

はじめに

「ダブルクリックまでの実装方法は分かるのにトリプルクリックはどうすればいいの?」
「めんどくさいコードは書かずに、極力楽に実装したい！」

そんな悩みはないでしょうか?

クリックイベントには基本のclick,dblclickがありますが、トリプルクリックはありません。
ではどのようにしてトリプルクリック以上のクリックを実装するのか?

この記事では複数回クリックイベントの実装方法を解説させていただきます！

この記事を見るメリット

  • トリプルクリック以上の複数回クリックイベントを作成できるようになる
  • 簡単にトリプルクリックを実装できる方法を知ることができる
  • javascriptによくでてくるevent引数の理解

対象者

この記事は下記のような人を対象にしています。

  • プログラミング初学者
  • 駆け出しエンジニア
  • トリプルクリックを実装したい方
  • 楽に実装したいめんどくさがり屋さんの方
  • トリプルクリックよりもっと多いクリック回数のイベントを作成したい方

結論

const hogeElement = document.getElementById('hoge')

hogeElement.addEventListener('click', (event) => {
　　　　　　　　if (event.detail === 3) {
  　　　　　　　　console.log('３回クリックしました！')
　　　　　　　　}
})

解説

初学者の方がこのコードに沸く疑問と解説

  • 引数に入ってくるeventってなんのこと?🤔
    • イベントオブジェクトを受け取るための引数
    • イベントオブジェクトはイベント発生時の情報がまとめられたもの
    • クリックした要素やイベントのタイプ、クリックした位置の情報など多くあります
    • 上記のコードでeventをコンソール出力すると、より理解が深まると思います！
  • event.detailって何の値?😇
    • 短時間に発生かつ連続したクリック数です
    • click時に１ずつ増加します
    • dblclickイベントのdetailの値は常に2になり増えません！
    • イベントをdbclickに変更して、event.detailをコンソール出力すると確認できます！

この実装の良いところ

  • 連打をしても、一旦間隔を空けない限り連続で中のイベントは処理されない（連打防止）
  • if節を見るだけで、このクリック回数で中が処理されることがパッと分かるので、コードが読みやすい！

おわりに

この記事ではトリプルクリック以上のクリックイベントの作成方法を解説させていただきました！
引数のeventなどは初学者の方などは詰まりやすい部分でもあるので、別途記事を作成したいとも思いました。
コード自体はシンプルなので、今すぐコピペで使用できると思います😊

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)

Discussion