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

ultima ipad 2018

Question

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

Usé 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 táctiles, pero puedes construir fácilmente el tuyo usando los siguientes eventos

• touchstart
• 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 alguna buena documentación:

Answer 2

El enfoque más simple es utilizar una biblioteca de JavaScript multitouch 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 continuar. 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 3

Estaba un poco preocupado por usar solo touchmove para mi proyecto, ya que solo parece disparar 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>

Answer 4

Puede usar .on() para capturar múltiples eventos y luego probar 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 5

Sé que llegué un poco tarde a esto, pero solo probé 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 on y se bind tiempo que proporciona soporte para un conjunto exhaustivo de eventos táctiles.

Answer 6

Si usas jQuery 1.7+, es incluso más simple que todas estas otras respuestas.

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

Answer 7

Usar touchstart o touchend por sí solo no es una buena solución, porque si se desplaza por la página, el dispositivo la detectará al 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 tocar el desplazamiento fácilmente.

Answer 8

jQuery Core no tiene nada especial, pero puede leer en la página de jQuery Mobile Events sobre diferentes eventos táctiles, que también funcionan en 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 el tacto en dispositivos móviles), los dispositivos con iOS congelan la manipulación del DOM mientras se desplazan.