jQuery auf 'Doppelklick' Ereignisse (dblclick für mobile)

Question

Ich habe folgende jquery Event-Handling-Funktion:

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

Mein Problem ist, dass diese Event-Handler nicht auf Touch-Geräten funktionieren (iPhone, iPad. ..). Kann jemand eine zuverlässige Alternative zu dblclick empfehlen, die auf Touch-Geräten funktioniert und dennoch einen komfortablen Doppelklick auf Full-Size-Geräte ermöglicht?

Answer 1

landete ich eine benutzerdefinierte Doppelklickfunktion erstellen, die sowohl mobile und 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 hier ist die JSfiddle Demo.

Answer 2

Sie können mehrere Ereignis-Listener für 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 
    } 
}); 

Answer 3

Sie müssen „return false“ an das Ende der Funktion wie eingeben unter

var touchtime = 0; 
$('.dbclickopen').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 
      touchtime = 0; 
      window.location = this.href; 
     } else { 
      //not a double click so set as a new first click 
      touchtime = new Date().getTime(); 
     } 
    } 
    return false; 
}); 

Answer 4

Die deutliche Antwort von @JRulle nur für ein einzelnes Objekt zu funktionieren scheint, wenn u haben viele Instanzen mit der gleichen Klasse werden sie als ein einzelnes Objekt siehe Beispiel in Betracht gezogen werden
Fiddle example

Meine Lösung scheint, dass

in Fällen zu arbeiten

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>

Answer 5

Fügen Sie diese auf Ihre index.html

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

ich die mobile Zoom-Funktion von jQuerys dblclick werfen würde. Im Grunde sagt es, dass Ihr Ansichtsfenster sich nicht effektiv ändert, um den Zoom abzuschalten. Dies funktioniert für mich auf meinem Nexus 5 mit Chrome.

Answer 6

Ich habe eine Verbesserung für den Code oben, dass Artikel nicht einen Doppelklick nach einem Klick erfassen:

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

Dieser Code alle Ein Doppelklick erkennt. Ich habe auch die Touchtime auf 500ms (Standard-Doppelklick-Zeit) reduziert.