jQueryで長押し・ロングタップ判定する2つの方法【PC・スマホ対応】

タイトルの通り。

  • 要素が長押しされたかどうか
  • 要素がロングタップされたかどうか

このような 長押し・ロングタップ判定をjQueryで行う方法 をまとめてみました。

個人的には2つ目に紹介する方法が一番楽かもしれないです。

1.原始的に長押しされたか検知するやり方

まず1つめは原始的に長押し判定を行うやり方

別に長押しイベントくらいなら、自分で実装するのは難しくありません。

 

そのやり方は既存の clickイベント で次コードみたいに工夫するだけです。

▼ 例えば このようなコード

こうすれば、疑似的だけど長押しクリック・タッチを感知できます。

上コードだと長押しの閾値は 1500ミリ秒(=1.5秒)としていますが、長めにとるなら 3000ミリ秒 、短めにするなら 1000ミリ秒 くらいがちょうどいい気します。

 

あるいは全体で 'longpress'  というイベントを発火させ、個別要素で受け取る方法もアリですね。

▼ 1.まず独自の longpressイベント をドキュメント全体で発火

▼ 2.長押しを検知したいイベントにリスナー登録

以上が独自イベントを trigger  するやり方

まあこういう方法もあるけど、次に紹介する方法を使う方が数百倍楽ですけどね・・・

2.長押し・ロングタップ検知プラグインの導入

実は上みたいな面倒なことをしなくても、もっと楽な方法があります。

それが jquery-longpress プラグインを使うこと

名前の通り、jQuery専用で長押し検知できる機能を追加できるプラグイン。

その導入手順と使い方はつぎの通りです。

 

1.jQueryプラグインのダウンロード&読み込み

ここから jquery.longpress.js を落として、よみこめばOK

ただし jQuery に依存するので、必ず jQuery を読み込み後に書いてください。

 

2.長押し判定したい要素に対してlongpress を登録する

こんな感じ

1つめの引数に長押し時のコールバック関数、2つめには通常クリック時のコールバック、3つめには長押しを検知するミリ秒を渡す感じです。

とてもスマート&簡潔に書けて便利ですね。

自分で実装するのが面倒だったり、変なバグを発生させたくないなら、こういう優れたプラグインを使う方が確実かもしれません。(というか自前実装は色々あやうい)

ここまでのまとめ

今紹介した方法は次の2つ

  • 原始的に長押しされたか検知するやり方
  • 長押し・ロングタップ検知のプラグイン導入

もし「他にもっといい方法ある!」とご存知の方はコメントで教えてください。

以上 jQuery で長押し・ロングタップ検知する方法でした。ではまた バイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください