JavaScriptでボタンの長押しのイベントハンドラを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでボタンの長押しのイベントハンドラを実装する方法について現役エンジニアが解説しています。長押しの検知を行うために、addEventListenerでボタンクリックイベントの開始と終了を検知します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでボタンの長押しのイベントハンドラを実装する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでボタンの長押しのイベントハンドラを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

イベントとは

JavaScriptで「イベント」と表現するものは、ウェブページ上で発生するあらゆるアクションの総称のことを指します。

具体例としては、「ボタンをクリックする」「入力フォームに文字入力をする」「ドラッグ&ドロップを行う」「ページをスクロールする」「ページを移動しようとする」等の様々なアクションのことです。

ボタンの長押しで発動するイベントハンドラを実装する方法

JavaScriptでclickやonMouseDownのようにボタン長押しを検知するメソッドはありません。なので自前で実装する必要があります。

長押しの検知を行うために、addEventListenerでボタンクリックイベントの開始と終了を検知します。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

長押しした秒数をカウント

 

HTML

<div id="button" style="width: 300px, height:100px"></div>
<p id="longText">ボタン長押し</p>

 

JavaScript

var count = 0;
var timer;
var device = navigator.userAgent.toLowerCase();
var isSP = /iphone|ipod|ipad|android/.test(ua);
var tapButton = document.getElementById('button');
var longText = document.getElementById('longText');
var eventStart = isSP ? 'touchstart' : 'mousedown';
var eventEnd = isSP ? 'touchend' : 'mouseup';
var eventLeave = isSP ? 'touchmove’': 'mouseleave';

tapButton.addEventListener(eventStart, e => {
e.preventDefault();
tapButton.classList.add('active');
timer = setInterval(() => {
count++;
longText.textContent = (count / 100) + '秒';
}, 10);
})

tapButton.addEventListener(eventEnd, e => {
e.preventDefault();
if (count) {
tapButton.classList.remove('active');
clearInterval(timer);
longText.textContent = (count / 100) + '秒長押しされました';
count = 0;
}
});

tapButton.addEventListener(eventLeave, e => {
e.preventDefault();
var el;
el = isSP ? document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY) : tapButton;
if (!isSP || el !== tapButton) {
tapButton.classList.remove('active');
clearInterval(timer);
longText.textContent = '処理を中断';
count = 0;
}
});

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。