何番目のliタグが長押しされたかを取得したい

Question

現在Monacaを用いてアプリ開発を行っております。

HTML上に書いたリスト（li）で、どのliタグをクリックしたかを取得するために、以下のコードを用いて、クリックしたliタグが上から何番目であるかを取得しています。

「クリック」した場合はこのコードで問題無いのですが、クリックではなく「長押し」（PCの場合は左クリックの長押し）をした場合でも、何番目のliタグが長押しされているのか取得したいのですが、どのようなコードで長押しを検出できるのか分からず、コードの書き方をお知りの方よろしくお願いいたします。

<ul id="list">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
</ul>

  $(document).on('click','#list li', function() {  // #listのliがクリックされたら
    var index = $('#list li').index(this);// そのliが上から何番目か取得
    index = index + 1;
    alert(index + '番目のliタグがクリックされました');
  });

Answer 1

mousedownにウェイト処理を絡めればよいのでは？

document.addEventListener('mousedown',function(e){
  setTimeout(function(){console.log('長押し')},1000);
});     

jQueryならwhenとかpromiseとか・・・

修正

長押しになっていなかったのでclear処理をいれました

var timerID=0;
document.addEventListener('mousedown',function(e){
  timerID=setTimeout(function(){console.log('長押し')},1000);
});     
document.addEventListener('mouseup',function(e){
  clearTimeout(timerID);
});     

Comments

[miyabi-sun]

これだと長押しじゃなくて、タップしてから1秒後に勝手に動作するコードに見えますが…

[yambejp]

miyabi-sunさん、ご指摘ありがとうございました
たしかにそのとおりですね
mouseup時にclear処理が必要になるので追記しておきました

[miyabi-sun]

対応ありがとうございます。
この手法を使えば質問文にあったliの順番に関しても、
`mouseup`だけドキュメントルートから引っ掛けるようにすれば実現できそうですね！

[agepan]

ご回答ありがとうございました！
頂いたコードをもとに、色々と弄りまして何とか希望する動きをするコードになりました。
スマホで動作させたかったので、mouseイベントをtouchイベントに置き換えています。

var timerID=0;
var list = document.getElementById("list");
list.addEventListener('touchstart',function(e){
timerID=setTimeout(function(){

console.log('長押し');

$(document).on('touchstart','#list li', function() { // #listのliがクリックされたら
var index = $('#list li').index(this);// そのliが上から何番目か取得
index = index + 1;
alert(index + '番目のliタグがクリックされました');
});

},1000);
});
list.addEventListener('touchend',function(e){
clearTimeout(timerID);
});

Answer 2

長押し検知のプラグインがあるようです（私の方では未検証ですが）

• 左クリック長押しでイベントを発生させるjQueryプラグイン

またtouchstart～touchendの間の時間で「ロングタップである」判断をするように組まれている方の記事がありました。

• 【jQuery】iOS Safariでも、ボタンをサクサク動作＋ついでに長押し検知

参考にしてください。

Comments

[agepan]

ご回答ありがとうございました！
先にこちらのプラグインを試してみたのですが思うように動かず（自分のコードの書き方の問題だと思います…）、2番目に回答頂いた方の方法を使ってみたところうまく動作しました。
情報ありがとうございました！