¿Cómo se reconocen los eventos táctiles usando jQuery en Safari para iPad? ¿Es posible?

Question

¿Es posible reconocer eventos táctiles en el navegador Safari del iPad usando jQuery?

Utilicé los eventos mouseOver y mouseOut en una aplicación web. ¿Hay algún evento similar para el navegador Safari del iPad ya que no hay eventos como mouseOut, mouseMove?

Answer 1

Core jQuery no tiene nada especial para eventos de toque, pero se puede construir fácilmente su propio uso de los siguientes eventos

• touchstart
• touchmove
• touchend
• touchcancel

Por ejemplo, touchmove

document.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
    var touch = e.touches[0]; 
    alert(touch.pageX + " - " + touch.pageY); 
}, false); 

Esto funciona en la mayoría de los navegadores basados ​​en webkit (incl. androide).

Here is some good documenation:

Answer 2

Yo estaba un poco preocupado por el uso de solamente touchmove para mi proyecto, ya que sólo se parece al fuego cuando sus táctil se mueve de un lugar a otro (y no en el contacto inicial). Así que lo combiné con touchstart, y esto parece funcionar muy bien para el toque inicial y cualquier movimiento.

<script> 

function doTouch(e) { 
    e.preventDefault(); 
    var touch = e.touches[0]; 

    document.getElementById("xtext").innerHTML = touch.pageX; 
    document.getElementById("ytext").innerHTML = touch.pageY; 
} 

document.addEventListener('touchstart', function(e) {doTouch(e);}, false); 
document.addEventListener('touchmove', function(e) {doTouch(e);}, false); 

</script> 

X: <div id="xtext">0</div> 
Y: <div id="ytext">0</div> 

Answer 3

El enfoque más simple es utilizar un multitouch JavaScript library like Hammer.js. A continuación, puede escribir el código como:

canvas 
    .hammer({prevent_default: true}) 
    .bind('doubletap', function(e) { // And double click 
     // Zoom-in 
    }) 
    .bind('dragstart', function(e) { // And mousedown 
     // Get ready to drag 
    }) 
    .bind('drag', function(e) { // And mousemove when mousedown 
     // Pan the image 
    }) 
    .bind('dragend', function(e) { // And mouseup 
     // Finish the drag 
    }); 

Y puede seguir adelante. Es compatible con tocar, tocar dos veces, deslizar, mantener, transformar (es decir, pellizcar) y arrastrar. Los eventos táctiles también se activan cuando ocurren acciones de mouse equivalentes, por lo que no es necesario escribir dos conjuntos de controladores de eventos. Ah, y necesitas el plugin jQuery si quieres poder escribir en la forma jQuery como yo lo hice.

Answer 4

jQuery Core no tiene nada especial, pero puede leer en la página jQuery Mobile Events sobre diferentes eventos táctiles, que también funcionan en dispositivos que no sean iOS.

Ellos son:

• grifo
• taphold
• golpe
• swipeleft
• swiperight

Nótese también, que durante los eventos de desplazamiento (basado en el tacto en los dispositivos móviles) Los dispositivos con iOS congelan la manipulación del DOM mientras se desplazan.

Answer 5

Si está utilizando jQuery 1.7+ es aún más simple que todas estas otras respuestas.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } }); 

Answer 6

Yo sé que soy un poco tarde en esto, pero acabo de probar benmajor's GitHub jQuery Touch Events plugin para ambas versiones 1.4 y 1.7+ de jQuery. Es liviano y funciona perfectamente con on y bind al mismo tiempo que brinda soporte para un conjunto exhaustivo de eventos táctiles.

Answer 7

Puede utilizar .on() para capturar múltiples eventos y luego probar para la pantalla táctil, por ejemplo:

$('#selector') 
.on('touchstart mousedown', function(e){ 
    e.preventDefault(); 
    var touch = e.touches[0]; 
    if(touch){ 
    // Do some stuff 
    } 
    else { 
    // Do some other stuff 
    } 
}); 

Answer 8

Usando touchstart o touchEnd por sí sola no es una buena solución, porque si se desplaza a la página, el dispositivo detecta como tocar o tocar también. Entonces, la mejor manera de detectar un evento de tocar y hacer clic al mismo tiempo es simplemente detectar los eventos táctiles que no están moviendo la pantalla (desplazamiento). Para hacer esto solo agregue este código a su aplicación:

$(document).on('touchstart', function() { 
    detectTap = true; //detects all touch events 
}); 
$(document).on('touchmove', function() { 
    detectTap = false; //Excludes the scroll events from touch events 
}); 
$(document).on('click touchend', function(event) { 
    if (event.type == "click") detectTap = true; //detects click events 
     if (detectTap){ 
      //here you can write the function or codes you wanna execute on tap 

     } 
}); 

Lo probé y funciona bien para mí en iPad y iPhone. Detecta el toque y puede distinguir el toque y el desplazamiento fácil.