it-swarm.com.de

jQuery bei 'Doppelklick'-Ereignis (dblclick für Handys)

Ich habe die folgende Jquery-Ereignisbehandlungsfunktion:

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

Mein Problem ist, dass dieser Event-Handler auf Touch-Geräten (iPhone, iPad ...) nicht funktioniert. Kann jemand eine zuverlässige Alternative zu dblclick empfehlen, die auf Touch-Geräten funktioniert und dennoch die Verwendung von Doppelklicks auf Geräten mit voller Größe ermöglicht?

18
JRulle

Am Ende baute ich eine benutzerdefinierte Doppelklick-Funktion, die sowohl auf Mobilgeräten als auch auf dem Desktop funktioniert:

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>

Alternativ ist hier die JSfiddle Demo .

15
JRulle

Sie können mehrere Ereignis-Listener an das Element binden und das Ereignis tap von jQuery für die Touch-Geräte verwenden.

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

Fügen Sie dies zu Ihrer index.html hinzu

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

Ich fand, dass die mobile Zoom-Funktion Jquery's Dblclick abwerfen würde. Grundsätzlich heißt es, dass sich Ihr Ansichtsbereich nicht ändert, und der Zoom wird abgeschaltet. Dies funktioniert für mich auf meinem Nexus 5 mit Chrome. 

2
Thomas Valadez

Die markierte Antwort von @JRulle scheint nur für ein einzelnes Objekt zu funktionieren. Wenn Sie viele Instanzen mit derselben Klasse haben, werden sie als einzelnes Objekt betrachtet Siehe Beispiel
Fiddle Beispiel

In solchen Fällen scheint meine Lösung zu funktionieren

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

Ich habe eine Verbesserung des obigen Codes, der nach einem Klick keinen Doppelklick feststellte:

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

Dieser Code erkennt alle Doppelklicks. Ich habe auch die Touchtime auf 500ms (Standard-Doppelklickzeit) reduziert.

0
webslash

Danke für die Lösung - das einzige, was ich getan habe, war ein Timeout hinzuzufügen, damit sie als separate Ereignisse behandelt werden können

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

Obwohl ich es nicht getestet habe, lohnt es sich möglicherweise, einem Header-Abschnitt eines beliebigen HTML-Codes <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> Folgendes hinzuzufügen: To "user-scalable = no" oder nicht "user-scalable = no"

0
Elliott