jQuery sul caso 'doppio click' (DoppioClic per la telefonia mobile)

Question

ho il seguente evento jQuery funzione di gestione:

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

Il mio problema è che questo gestore di eventi non funziona su dispositivi touch (iPhone, iPad. ..). Qualcuno può raccomandare un'alternativa affidabile a dblclick che funziona su dispositivi touch e consente comunque un comodo doppio clic sull'uso su dispositivi di dimensioni standard?

Answer 1

ho finito per la costruzione di una doppia funzione personalizzata click che funzionerà sia su mobile e desktop:

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>

In alternativa, ecco la JSfiddle Demo.

Answer 2

È possibile associare più listener di eventi all'elemento e utilizzare l'evento tap di jQuery per i dispositivi tattili.

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

Answer 3

è necessario inserire "return false" alla fine della funzione come qui di seguito

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

La risposta marcata di @JRulle sembra funzionare solo per un singolo oggetto, se u avere molti istanze con la stessa classe saranno considerati come un singolo oggetto vedi disegno
Fiddle example

la mia soluzione sembra funzionare in casi del genere

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

Aggiungi questo al vostro index.html

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

ho trovato la funzione di zoom cellulare getterebbe di DblClick di jQuery. Fondamentalmente dice che il tuo viewport non cambierà efficacemente chiudendo lo zoom. Funziona per me sul mio Nexus 5 con Chrome.

Answer 6

Ho un miglioramento del codice di cui sopra, che hanno ragione't rilevare un doppio dopo un singolo clic:

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

Questo codice rileva tutti DoubleClick. Ho anche ridotto il tempo di utilizzo a 500ms (standard con doppio clic).