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

JavaScriptのtouchstartイベントの使い方

マウスのクリックではなく、タップに反応するイベントの実装方法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の記法を紹介していますので、こちらもぜひ合わせてご覧ください。


当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次