Written by Kasumi

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

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

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

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

【タップしたか】を検知

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

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

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

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

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

【指が離れたか】を検知

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

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

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

まとめ

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

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

目次

関連記事

HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1331
jQuery

【簡単】jQueryプラグインのlightboxを使って、画像モーダルウィンドウを実装しよう。

更新日:2022.09.09
5672
jQuery

jQueryを使って、金額を三桁でカンマ区切りする方法

更新日:2022.09.09
10316
jQuery

jQuery UI Datepickerで本日を基準に過去を非選択。選択可能日を設定する方法

2023.10.02
883