javascript - tactil - no funciona el touch de mi iphone 5

Detecte doble toque en la pantalla del ipad o iphone usando javascript

Question

Me gustaría detectar si un usuario ha pulsado dos veces en un iPad o iPhone.

¿Existe un evento javascript que proporcionaría esta funcionalidad?

Answer 1

Detectar doble toque

prueba el siguiente fragmento en un dispositivo táctil

event.preventDefault() deshabilitará el toque doble zoom en div#double-tap

document.getElementById("double-tap").addEventListener("touchstart", tapHandler);
var tapedTwice = false;
function tapHandler(event) {
if(!tapedTwice) {
tapedTwice = true;
setTimeout( function() { tapedTwice = false; }, 300 );
return false;
}
event.preventDefault();
//action on double tap goes below
alert(''You tapped me Twice !!!'');
}

div#double-tap {
height: 50px;
width: 200px;
border: 1px solid black;
background-color: lightblue;
line-height: 50px;
text-align: center;
margin: 50px auto;
}

<div id="double-tap">Double Tap Me !!!</div> 

Answer 2

Creé este en JavaScript y parece funcionar bien. (Lo probé en mi iPad 2). Es básicamente el código de lo que se dice arriba.

var clickTimer = null;
function touchStart() {
if (clickTimer == null) {
clickTimer = setTimeout(function () {
clickTimer = null;
alert("single");
}, 500)
} else {
clearTimeout(clickTimer);
clickTimer = null;
alert("double");
}
}

Answer 3

El doble toque en un iPad es complicado porque el navegador, de forma predeterminada, absorbe este evento como un evento de "zoom", como se ve aquí:

Sin embargo, si cancela el comportamiento predeterminado, puede capturar el doubletap usted mismo. Aquí hay un ejemplo de un complemento que hace esto por usted: el complemento jQuery doubletap .

Answer 4

El jquery.doubletap de Technoweenie lo hace y este enlace: los eventos móviles de jQuery finalmente lanzados parecen ser capaces de resolver la tarea ...

Answer 5

Encontré esta solución en en algún lugar pero olvidé qué publicación exacta. Funciona para un doble clic en un navegador y doble toque en el iPhone.

Uso ''touchend click'' para detectar el doble clic tanto en el navegador como en el iPhone. Para implementar solo en iPhone, elimine el clic.

var timeout;
var lastTap = 0;
$(''element'').on(''touchend click'',function(e){
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTap;
e.preventDefault();
clearTimeout(timeout);
if(tapLength < 500 && tapLength > 0){
//Double Tap/Click
}else{
//Single Tap/Click
timeout = setTimeout(function(){
//Single Tap/Click code here
clearTimeout(timeout);
}, 500);
}
lastTap = currentTime;
});

Answer 6

Esto podría ser utilizado para un doble toque o un doble clic. En javascript puro:

var mylatesttap;
function doubletap() {
var now = new Date().getTime();
var timesince = now - mylatesttap;
if((timesince < 600) && (timesince > 0)){
// double tap
}else{
// too much time to be a doubletap
}
mylatesttap = new Date().getTime();
}

Answer 7

Podría usar la biblioteca móvil de jQuery para construir su aplicación: http://jquerymobile.com/ ; tiene muchos eventos táctiles incorporados. También puedes probar jQuery touch library: http://jqtouch.com/

Answer 8

También puede usar jquery.finger que admite eventos delegados .

Answer 9

Una idea básica es hacerlo así:

1. Para crear un evento de doble toque (o doble clic) necesita crear código en el evento onClick .

2. La razón por la que lo más probable es que desee hacer doble clic / clic es porque ya tiene algo adjunto al evento onClick y necesita un gesto diferente en el mismo elemento.

3. Esto significa que su evento onClick solo debe iniciar el evento onClick después de que se setTimeout() un setTimeout() .

4. Así que el código básico iniciaría la función adjunta al evento onClick usando un setTimeout() . El primer clic dice "Iniciar el temporizador + ejecutar la función usando setTimeout() después de decir. 500 milisegundos. La segunda vez que haga clic, verificará si el segundo clic estuvo dentro de un período de tiempo específico para contar como un doble toque. Por lo tanto, si la hora de setTimeout() era inferior a 500 milisegundos, cancelaría setTimeout() utilizando clearTimeout() y luego clearTimeout() una función completamente diferente (la función que quería iniciar para doble pestaña / clic)

5. ¿Deteniendo la acción por defecto? - Probablemente algo como stopPropagation() o cancelBubble() haría el truco. Honestamente, no lo sé, pero ahí es donde empezaría a investigar.

Answer 10

basado en los últimos documentos de jquery, implementación de doble toque

https://gist.github.com/attenzione/7098476