タイトルの通り。
- 要素が長押しされたかどうか
- 要素がロングタップされたかどうか
このような 長押し・ロングタップ判定をjQueryで行う方法 をまとめてみました。
個人的には２つ目に紹介する方法が一番楽かもしれないです。
１．原始的に長押しされたか検知するやり方
まず１つめは原始的に長押し判定を行うやり方
別に長押しイベントくらいなら、自分で実装するのは難しくありません。
そのやり方は既存の clickイベント で次コードみたいに工夫するだけです。
▼ 例えば このようなコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/// 長押しを検知する閾値 var LONGPRESS = 1500; /// 長押し実行タイマーのID var timerId; /// 長押し・ロングタップを検知する $('.example').on("mousedown touchstart",function(){ timerId = setTimeout(function(){ /// 長押し時（Longpress）のコード }, LONGPRESS); }).on("mouseup mouseleave touchend",function(){ clearTimeout(timerId); }); |
こうすれば、疑似的だけど長押しクリック・タッチを感知できます。
上コードだと長押しの閾値は 1500ミリ秒（＝1.5秒）としていますが、長めにとるなら 3000ミリ秒 、短めにするなら 1000ミリ秒 くらいがちょうどいい気します。
あるいは全体で 'longpress' というイベントを発火させ、個別要素で受け取る方法もアリですね。
▼ １．まず独自の longpressイベント をドキュメント全体で発火
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/// 長押し検知の閾値 var LONGPRESS = 1500; /// イベント発火するタイマーのID var timerId; $(window).on("mousedown touchstart",function(e){ timerId = setTimeout(function(){ /// イベントタイプ longpress を発火 $(e.target).trigger('longpress'); }, LONGPRESS); }).on("mouseup mouseleave touchend",function(){ // 長押し検知タイマーを消去 clearTimeout(timerId); }); |
▼ ２．長押しを検知したいイベントにリスナー登録
|
1 2 3 |
$('.post-text').on('longpress', function(){ /// 長押し（longpress）された時の処理... }); |
以上が独自イベントを trigger するやり方
まあこういう方法もあるけど、次に紹介する方法を使う方が数百倍楽ですけどね・・・
２．長押し・ロングタップ検知プラグインの導入
実は上みたいな面倒なことをしなくても、もっと楽な方法があります。
それが jquery-longpress プラグインを使うこと
名前の通り、jQuery専用で長押し検知できる機能を追加できるプラグイン。
その導入手順と使い方はつぎの通りです。
１．jQueryプラグインのダウンロード＆読み込み
ここから jquery.longpress.js を落として、よみこめばＯＫ
|
1 |
<script type="text/javascript" src="jquery.longpress.js"></script> |
ただし jQuery に依存するので、必ず jQuery を読み込み後に書いてください。
２．長押し判定したい要素に対してlongpress を登録する
|
1 2 3 4 5 6 |
$('#example').longpress(function(e) { /// ここに長押し時のコード }, function(){}, /// 通常クリック時のコールバック 2000 /// 長押しイベントを検知するミリ秒 ); |
こんな感じ
１つめの引数に長押し時のコールバック関数、２つめには通常クリック時のコールバック、３つめには長押しを検知するミリ秒を渡す感じです。
とてもスマート＆簡潔に書けて便利ですね。
自分で実装するのが面倒だったり、変なバグを発生させたくないなら、こういう優れたプラグインを使う方が確実かもしれません。（というか自前実装は色々あやうい）
ここまでのまとめ
今紹介した方法は次の２つ
- 原始的に長押しされたか検知するやり方
- 長押し・ロングタップ検知のプラグイン導入
もし「他にもっといい方法ある！」とご存知の方はコメントで教えてください。
以上 jQuery で長押し・ロングタップ検知する方法でした。ではまた ﾊﾞｲﾊﾞｲ
