Written by Kasumi

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

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

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

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

【タップしたか】を検知

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

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

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

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

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

【指が離れたか】を検知

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

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

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

まとめ

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

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

目次

関連記事

jQuery

【jQuery】スクロール途中からヘッダーやナビを固定する方法

更新日:2022.09.09
1582
jQuery

【簡単】jQueryとCSSを使って要素をふわっと出す方法【プラグイン不要】

更新日:2022.09.09
1420
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2241
jQuery

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

更新日:2022.09.09
5688