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

タイトルの通り。

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

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

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

このページの目次

１．原始的に長押しされたか検知するやり方
２．長押し・ロングタップ検知プラグインの導入
ここまでのまとめ

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

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

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

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

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

/// 長押しを検知する閾値
var LONGPRESS = 1500;
/// 長押し実行タイマーのID
var timerId;

/// 長押し・ロングタップを検知する
$('.example').on("mousedown touchstart",function(){
  timerId = setTimeout(function(){
    /// 長押し時（Longpress）のコード
  }, LONGPRESS);
}).on("mouseup mouseleave touchend",function(){
  clearTimeout(timerId);
});

/// 長押しを検知する閾値

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イベントをドキュメント全体で発火

/// 長押し検知の閾値
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);
});

/// 長押し検知の閾値

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);

});

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

$('.post-text').on('longpress', function(){
  /// 長押し（longpress）された時の処理...
});

$('.post-text').on('longpress', function(){

/// 長押し（longpress）された時の処理...

});

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

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

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

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

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

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

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

１．jQueryプラグインのダウンロード＆読み込み

GitHub

vaidik/jquery-longpress

https://github.com/vaidik/jquery-longpress

A jQuery plugin that makes it easy to support long press events on mobile devices and desktop borwsers. - vaidik/jquery-longpress

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

<script type="text/javascript" src="jquery.longpress.js"></script>

1	<script type="text/javascript" src="jquery.longpress.js"></script>

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

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

$('#example').longpress(function(e) {
    /// ここに長押し時のコード
  }, 
  function(){},  /// 通常クリック時のコールバック
  2000           /// 長押しイベントを検知するミリ秒
);

$('#example').longpress(function(e) {

/// ここに長押し時のコード

function(){}, /// 通常クリック時のコールバック

2000 /// 長押しイベントを検知するミリ秒

);

こんな感じ

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

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

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

ここまでのまとめ

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

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

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

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

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

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

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

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる