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

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

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

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

【タップしたか】を検知

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

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

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

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

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

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

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

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

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