【jQuery】スマホタッチイベント一覧まとめ

jQueryで使われるスマホタッチイベントについてまとめました。

タッチイベントは、タッチデバイスで要素を指でタップするだけで発火する便利なイベントです。この記事で基礎知識をインプットしましょう！

また、各セクションでjQueryのイベントごとの解説記事を紹介していますので合わせてご一読ください。

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

【jQuery】タッチイベントのまとめ

jQueryのタッチイベントは次のようなものがあります。

• touchstart()：タッチデバイスで要素をタップしたときにイベントが発火
• touchend()：タッチデバイスで要素をタップして指を離した後、イベントが発火
• touchmove()：タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火

それぞれのイベントについて簡単に紹介していきます！

touchstart()イベントについて

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.

touchstart()イベントについては下記の記事で詳しく解説していますので、ご一読ください。

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

touchend()イベントについて

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.

touchend()については下記の記事で詳しく解説していますので、ご一読ください。

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

touchmove()イベントについて

touchmove()イベントは、タッチデバイスで要素をタップしたまま指を移動させるとイベントが発火します。

基本書式

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

上の書式にコードを当てはめると次のようになります。

<div class="box" id="js-box">タップしたまま指を移動！</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("touchmove", function () {
  alert('touchmove');

});

出力結果

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

touchmove()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】指の移動で発火するtouchmoveイベントの使い方

まとめ

タッチイベントは、タッチデバイスで要素を指でタップするだけで発火する便利なイベントです。クリックイベントと区別して使う必要があります。スマホでのイベントを実行する場合はタッチイベントを使用しましょう！

jQueryのタッチイベントまとめ

• touchstart()：タッチデバイスで要素をタップしたときにイベントが発火
• touchend()：タッチデバイスで要素をタップして指を離した後、イベントが発火
• touchmove()：タッチデバイスで要素をタップしたまま指を移動させるとイベントが発火

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー