Ho modificato la soluzione javascript di @ ecmanaut per fare due cose.
- Uso modernizr, quindi inserirà una classe ct. Touch nel nodo html, in modo da poter rilevare gli schermi tattili invece di utilizzare il rilevamento degli agenti utente. Forse c'è un approccio "senza modernizzazione", ma io non lo so.
- Separo ogni "clic" in modo che avvengano separatamente, se si fa clic una volta, verrà fatto clic una volta, se si fa rapidamente clic sul pulsante/trigger, verrà conteggiato più volte.
- alcune modifiche minori di formattazione del codice, preferisco ogni var definita separatamente ecc., Questa è più una cosa "me" di ogni altra cosa, suppongo che potresti semplicemente ripristinare ciò, non accadrà nulla di brutto.
Credo che queste modifiche rendono meglio, causa si può incrementare un contatore 1,2,3,4 invece di 2,4,6,8
Ecco il codice modificato:
// jQuery no-double-tap-zoom plugin
// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
//
// [email protected]: I modified this to
// use modernizr and the html.touch detection and also to stop counting two
// clicks at once, but count each click separately.
(function($) {
$.fn.nodoubletapzoom = function() {
if($("html.touch").length == 0) return;
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click');
});
};
})(jQuery);
il applicare la nodoubletapzoom() per il tag body, come questo
$("body").nodoubletapzoom();
la costruzione html, dovrebbe essere qualcosa di simile
<body>
<div class="content">...your content and everything in your page</div>
</body>
Poi, nel tuo javascript, si legano i gestori di clic come questo
$(".content")
.on(".mydomelement","click",function(){...})
.on("button","click",function(){...})
.on("input","keyup blur",function(){...});
// etc etc etc, add ALL your handlers in this way
è possibile utilizzare qualsiasi gestore di eventi jQuery e qualsiasi nodo dom. ora non devi fare altro, devi collegare tutti i gestori di eventi in questo modo, non ho provato in un altro modo, ma in questo modo funziona assolutamente solido, puoi letteralmente rapare lo schermo 10 volte al secondo e non ingrandisce e registra i clic (ovviamente non 10 al secondo, l'ipad non è così veloce, ciò che intendo è, non è possibile attivare lo zoom)
Penso che questo funzioni perché si allega il nozoom gestire il corpo e quindi collegare tutti i gestori di eventi al nodo ".content", ma delegando al nodo specifico in questione, quindi jquery cattura tutti i gestori nell'ultima fase prima che l'evento scoppiasse sul tag del corpo.
il vantaggio principale di questa soluzione è che devi assegnare il gestore nodoubletapzoom() al corpo, lo fai solo una volta, non una volta per ogni elemento, quindi è molto meno lavoro, sforzo e pensiero necessari per fare le cose.
questo ha l'ulteriore vantaggio in quanto se si aggiunge contenuto utilizzando AJAX, hanno automaticamente i gestori pronti e in attesa, suppongo che se lo desideri DIDNT, allora questo metodo non funzionerà per te e dovrai regolalo di più.
Ho verificato che questo codice funzioni su ipad, è davvero bello, ben fatto a @ecmanaut per la soluzione primaria !!
** Modificato il Sabato 26 maggio, perché ho trovato quello che sembra essere una soluzione perfetta con assolutamente il minimo sforzo
Ho usato questa soluzione davvero ... Questo argomento è davvero dettagliato, grazie! Per i visitatori, l'idea principale è la seguente: in primo luogo, prendere un evento "tap". Quindi, se viene lanciato un altro evento "tap" prima di 500 ms: è un "doppio tocco", quindi se puoi interrompere l'evento qui -> no "tocca due volte" :) Vedi il link per ulteriori spiegazioni. – Nicolas