【JS】スマホのタップでイベントを発火させる方法

2024年8月2日

マウスのクリックではなく、タップに反応するイベントの実装方法touchstartについて紹介します。

touchstart

button.addEventListener('touchstart', () => { 
  // 処理内容
});

JavaScriptのイベントリスナーにtouchstartを設定すると、スマホのタップでイベントを発火させられるようになります。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

clickイベントとの違い

よく使われるイベントリスナーのクリック（click）は、マウスのクリックはもちろん、スマホのタップでも反応します。
基本的には「click」で大きな問題はないのですが、「touchstart」には以下のような特徴があります。

スマホのブラウザでのみ作動する。（デスクトップのブラウザでは作動しない。）
「click」よりもレスポンスが早く、パフォーマンスが良い。
- 「touchstart」はタッチで発火するのに対し、「click」はタッチして離すことで発火します。

したがって、スマホのみで作動したいイベントについては「touchstart」を使う方がベターです。

ちなみに、タッチして離すことで発火する「touchend」というイベントもあります。

click / touchstart / touchend を実際に比較する

それぞれの発火イベントを設定したボタンを以下に用意しました。
デスクトップおよびスマホで、挙動を確認してみてください。

click

イベントのトリガー

クリック
タップして離す

touchstart

イベントのトリガー

タップ

touchend

イベントのトリガー

タップして離す

各ボタンのコードは以下に掲載しています。

click

<button id="btn-pc">Click!</button>

const btnPC = document.querySelector('#btn-pc');
btnPC.addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

touchstart

<button id="btn-sp-start">Touch!</button>

const btnSPstart = document.querySelector('#btn-sp-start');
btnSPstart.addEventListener('touchstart', () => {
  alert('ボタンがタップされました！');
});

touchend

<button id="btn-sp-end">Touch!</button>

const btnSPend = document.querySelector('#btn-sp-end');
btnSPend.addEventListener('touchend', () => {
  alert('ボタンがタップされました！');
});

PCかスマホかでイベントを変更する

PCなどのデスクトップ表示かスマホのブラウザ表示かを判別し、「click」と「touchstart(end)」を切り替えるには、以下コードを利用します。

"ontouchstart" in window || (window.DocumentTouch && document instanceof DocumentTouch);

スマホで表示されている場合はtrueが返され、そうでない場合はundefinedが返ってきます。
これを変数に代入し、結果をif文などで分岐すれば処理を変えることができます。

実装例

ブラウザがPCかスマホかで、クリックイベント（およびalertの表示内容）を変えられるボタンです。
それぞれのデバイスでクリック（タップ）してみてください。

HTML / JavaScript コード

<button id="btn">Click or Touch!</button>

const isTouchable = "ontouchstart" in window || (window.DocumentTouch && document instanceof DocumentTouch);
const btn = document.querySelector('#btn');

if (isTouchable) {
  btn.addEventListener('touchstart', () => {
    alert('ボタンがタップされました！');
  });
} else {
  btn.addEventListener('click', () => {
    alert('ボタンがクリックされました！');
  });
}

まとめ

以上、スマホのタッチ操作でイベントを発火させる方法について紹介しました。

記事内でもお伝えしたとおり、基本的にはclickイベントでも問題なく起動するため、スマホのイベントに必ず実装しなければならないというわけではありません。

ただ、近年はPCよりスマホ表示がメインになってきています。
余裕があればtouchstartイベントを使い、パフォーマンスの向上を狙ってみてください。

また、スマホ対応といえばレスポンシブウェブデザインが特に重要です。
以下記事でメディアクエリと呼ばれるCSSの記法を紹介していますので、こちらもぜひ合わせてご覧ください。