【jQuery】スマホ時のタップ・スワイプを検知、任意のイベントを実行する方法

スマホ時に画面を指でタップ・スワイプした時に任意のイベントを実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

【タップしたか】を検知

$("タップ・スライプする要素").on("touchstart",function() {
  // 任意のイベント
});

指が触れたか(タップ)を検知するには.on(“touchstart”)イベントを使います。

【スワイプしたか】を検知

$("タップ・スライプする要素").on("touchmove",function() {
  // 任意のイベント
});

指でスワイプしたかを検知するには.on(“touchmove”)イベントを使います。

【指が離れたか】を検知

$("タップ・スライプする要素").on("touchend",function() {
  // 任意のイベント
});

指が離れたかを検知するには.on(“touchend”)イベントを使います。

以上の紹介した方法で、jQueryを使ってタップ・スワイプしたら検知・任意のイベントを実行できます。

まとめ

スワイプ・タップした後、任意の要素を削除・追加したい時、本記事で紹介したタッチイベントとfadeInメソッド・fadeIOutメソッドを組み合わせるだけで簡単に処理を実行できます。

以上で解説を終わります。

関連記事

JavaScript プログラミング

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

2022.04.25
442
JavaScript

【jQuery】slickで現在のスライド番号と総数を表示する方法

2022.07.13
90
JavaScript プログラミング

【簡単】ajaxを使って別ページにある一部分のhtmlコードを取得し、読み込む方法【jQuery】

2022.02.18
146
JavaScript プログラミング

【簡単】slickスライダーをデバイス幅(PC・スマホ)によって機能を有効または無効にする方法

2022.02.10
464