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

JavaScriptのtouchstartイベントの使い方

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

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

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

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

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

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の記法を紹介していますので、こちらもぜひ合わせてご覧ください。

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

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次