Written by Kasumi

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

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

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

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

【タップしたか】を検知

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

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

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

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

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

【指が離れたか】を検知

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

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

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

まとめ

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

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

目次

関連記事

jQuery

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

更新日:2022.09.09
1974
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2007
jQuery

【簡単】スマホでよくある横スライドメニューを実装する方法【jQuery・CSS使用】

更新日:2022.09.09
1446
jQuery

[jQuery]デバイス幅(PC・スマホ)で条件分岐する方法【簡単】

更新日:2022.09.09
424