ZeroPlus Media > Web制作 > JavaScript > 【jQuery】スマホのみで発火するtouchstartとtouchendの使い方

【jQuery】スマホのみで発火するtouchstartとtouchendの使い方

2022/04/18

2022/08/09

jQueryにはタッチデバイスでのみ発火する便利なタッチイベントがあります。タッチイベントが扱えるようになると、例えばアコーディオンメニューをスマホではタッチイベントで実装、PCではクリックイベントで実装するなど使い分けることができるようになります。

この記事ではタッチイベントで特によく使う「touchstart()とtouchend()の使い方」を解説していきます。

この記事で身につく内容

jQueryのtouchstart/touchendイベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

touchstartイベントはタップされたときに発火
touchendイベントはタップした指が離れた後に発火
jQueryのタッチイベントについて
まとめ

touchstartイベントはタップされたときに発火

jQueryのtouchstart()イベントは、タッチイベントの一つです。タッチデバイスで要素をタップしたときにイベントが発火します。

基本書式

$('セレクタ').on('touchstart', function(){
  // ここに処理の内容を書く
});

実際にコードを当てはめると下記のようになります。

<div class="box" id="js-box">touch!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');

box.on("touchstart", function () {
  box.css('background', "red");
});

出力結果

See the Pen jQuery-touchstart by ZeroPlus (@zeroplus-programming) on CodePen.

タッチデバイスで要素をタッチすると、cssメソッドによって背景色が変化します。クリックではタッチイベントが発火しません。

touchendイベントはタップした指が離れた後に発火

jQueryのtouchend()イベントは、タッチイベントの一つです。タッチデバイスで要素をタップして指が離れた後にイベントが発火します。

基本書式

$('セレクタ').on('touchend', function(){
  // ここに処理の内容を書く
});

実際にコードを当てはめると下記のようになります。

<div class="box" id="js-box">touch!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');
box.on("touchend", function () {
  box.css('background', "blue");
});

出力結果

See the Pen jQuery-touchend by ZeroPlus (@zeroplus-programming) on CodePen.

touchstart()イベントと同様に、タッチデバイスで要素をタッチするとcssメソッドによって背景色が変化します。こちらもクリックではタッチイベントが発火しません。

jQueryのタッチイベントについて

タッチイベントはタッチデバイスでイベントが発火します。クリックイベントはタッチデバイスでも発火しますが、発火するまでタイムラグがあります（ワンテンポ遅い）。

コンソール画面で確認すると、タッチデバイスでクリックイベントが最後に発火します。（※Moblieモード時）

例えば次のHTML/CSSのときの、touchstart()、touchend()、click()イベントの動きの違いを確認してみましょう。

<div class="box" id="js-box">touch!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');
box.on("touchstart", function () {
  console.log('touchstart');
  box.css('background','red');
});

box.on("touchend", function () {
  console.log('touchend');
  box.css('background','yellow');
});

box.on("click", function () {
  console.log('click');
  box.css('background','green');
});

出力結果