¿Cómo puedo reconocer eventos táctiles usando jQuery en Safari para iPad? ¿Es posible?

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

Usé eventos mouseOver y mouseOut en una aplicación web. ¿Hay eventos similares para el navegador Safari del iPad ya que no hay eventos como mouseOut y mouseMove?

Core jQuery no tiene nada especial para eventos táctiles, pero puede crear fácilmente el suyo usando los siguientes eventos

• inicio táctil
• touchmove
• touchend
• touchcancel

Por ejemplo, el 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 (incluido Android).

Aquí hay una buena documentación .

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

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

El enfoque más simple es usar una biblioteca JavaScript multitáctil como Hammer.js . Entonces puedes escribir 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 puedes seguir adelante. Admite tocar, tocar dos veces, deslizar, mantener, transformar (es decir, pellizcar) y arrastrar. Los eventos táctiles también se activan cuando ocurren acciones equivalentes del mouse, por lo que no necesita escribir dos conjuntos de controladores de eventos. Ah, y necesitas el complemento jQuery si quieres poder escribir de la manera jQueryish como yo lo hice.

Usar el inicio táctil o el toque solo no es una buena solución, porque si desplaza la página, el dispositivo también la detecta como tocar o tocar. Entonces, la mejor manera de detectar un evento de tocar y hacer clic al mismo tiempo es detectar los eventos táctiles que no mueven la pantalla (desplazamiento). Para hacer esto, simplemente 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 want to execute on tap

       }
 });

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

Puede usar .on () para capturar múltiples eventos y luego probar el tacto en la pantalla, 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
  }
});

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 otros dispositivos que no sean iOS.

Son:

• grifo
• taphold
• golpe fuerte
• deslizar a la izquierda
• desliza a la derecha

Tenga en cuenta también que durante los eventos de desplazamiento (basados ​​en dispositivos táctiles en dispositivos móviles), los dispositivos iOS congelan la manipulación del DOM durante el desplazamiento.

Estaba un poco preocupado por usar solo touchmove para mi proyecto, ya que solo parece dispararse cuando su toque se mueve de una ubicación a otra (y no en el toque 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>

Acabo de probar el complemento GitHub jQuery Touch Events de benmajor para las versiones 1.4 y 1.7+ de jQuery. Es liviano y funciona perfectamente con ambos ony bindal mismo tiempo proporciona soporte para un conjunto exhaustivo de eventos táctiles.