web-dev-qa-db-ja.com

「ダブルクリック」イベントのjQuery（モバイル向けdblclick）

次のjqueryイベント処理関数があります。

$('.target').on('dblclick', function() {
    //respond to double click event
});

私の問題は、このイベントハンドラーがタッチデバイス（iPhone、iPad ...）で動作しないことです。タッチデバイスで動作し、フルサイズのデバイスで快適なダブルクリック使用を可能にするdblclickの信頼できる代替品を誰でも推奨できますか？

javascriptjquerytouch
18
JRulle

最終的に、モバイルとデスクトップの両方で動作するカスタムのダブルクリック機能を作成しました。

var touchtime = 0;
$(".target").on("click", function() {
    if (touchtime == 0) {
        // set first click
        touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - touchtime) < 800) {
            // double click occurred
            alert("double clicked");
            touchtime = 0;
        } else {
            // not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target">Double click me</div>

または、ここに JSfiddle Demo があります。

15
JRulle

要素に複数のイベントリスナーをバインドし、タッチデバイスに対してjQueryのtapイベントを使用できます。

$( ".target" ).on({
  dbclick: function() {
    //do stuff
  }, touch: function() {
    //do the same stuff
  }
});
3
Aweary

これをindex.htmlに追加します

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

モバイルズーム機能がJqueryのdblclickを無効にすることがわかりました。基本的には、ビューポートが効果的にズームを停止することはないという。これはChromeを実行しているNexus 5で機能します。

2
Thomas Valadez

@JRulleのマークされた答えは、1つのオブジェクトに対してのみ機能するようです。同じクラスのインスタンスが多数ある場合、それらは1つのオブジェクトと見なされます。例を参照してください。
中央の例

私の解決策はそのような場合にうまくいくようです

var touchtime = 0;
$('.target').on('click', function() {
  if (touchtime == 0) {
    touchtime = new Date().getTime();
  } else {
    if (((new Date().getTime()) - touchtime) < 800) {
      alert("double clicked");
      touchtime = 0;
    } else {
      touchtime = 0;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="target">click me!</p>
<p class="target">then click me!</p>

<a href="#">click link</a>
1
B.F.playz

上記のコードを改善しましたが、シングルクリック後にダブルクリックを検出できませんでした。

var touchtime = 0;
$(".target").on("click", function() {
  if (((new Date().getTime()) - touchtime) < 500) {
    alert("double clicked");
  }
  touchtime = new Date().getTime();
});

このコードは、すべてのダブルクリックを検出します。また、タッチ時間を500ミリ秒（標準のダブルクリック時間）に短縮しました。

0
webslash

解決策をありがとう-タイムアウトを追加して、別々のイベントとして扱うことができた

var touchtime = 0;
var delay = 800;
var action = null;
$(".target").on("click", function() {
  /*Double Click */
  if((new Date().getTime() - touchtime) < delay){
     clearTimeout(action)
     alert('dbl');
     touchtime=0;
  }
  /* Single Click */
  else{
     touchtime = new Date().getTime();
     action = setTimeout(function(){
        alert('single');
     },delay);
  }
}));

私はそれをテストしていませんが、HTMLのヘッダーセクションに以下を追加する価値があるかもしれません<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>あたり： 「user-scalable = no」へ、または「user-scalable = no」へ

0
Elliott