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


191

¿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?

Respuestas:


240

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 .


2
Muchas gracias David, creo que funcionará, pero ¿qué es e.touches [0]? ¿Puedes describir el argumento "e" en detalle?
Abhishek B.

77
e es el objeto de evento que se pasa automáticamente al controlador. Para el navegador safari (y también para Android) ahora contiene una serie de todos los toques que el usuario ha hecho en la pantalla. Cada toque tiene sus propias propiedades (x, y coords por ejemplo)
David Pean

1
ahora, ¿cómo hacer para encontrar qué elemento desencadenar el evento en -__-
Muhammad Umer

148

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

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

1
Sí, Timothy, no estaba usando la versión 1.7+ cuando comencé mi proyecto. ahora estoy usando jquery 1.7+. Gracias por una buena sugerencia y respuesta. Muchas gracias. :)
Abhishek B.

77
Esto funciona bien Necesitaba hacer clic y tocar para hacer lo mismo, y estoy acostumbrado a la sintaxis sin objetos, como$('#whatever').on('touchstart click', function(){ /* do something... */ });
goodeye

1
cuando voy $('#whatever').on({ 'touchstart' : function(ev){}});, evno parece tener ninguna información sobre los toques (toques, toques de destino o toques cambiados)
Octopus

8
@ Octopus: Encontrará la información de toques debajo ev.originalEvent.
Peter Bloomfield

1
@edonbajrami sí, por supuesto. verifique los documentos y busque "eventos delegados". $ ("# elemento para monitorear nuevos elementos"). on ("eventX", "#element", function (event) {/ * whatever * /});
honk31

24

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.


29
la solución "más simple" nunca implica complicar un problema agregando bibliotecas
Octopus

13
@Octopus La solución más simple es usar hammer.js que abstrae los dolores de cabeza entre navegadores. Use la extensión jQuery para estar en su zona familiar. No me parece demasiado complicado.
trusktr

1
la supuesta solución "más simple" es a menudo la que la gente arruina más ... hagas lo que hagas, no olvides asegurarte de que tu solución funcione en dispositivos que admitan tanto el tacto como el mouse, como Microsoft Surface
Simon_Weaver

1
@Octopus: "Cuando todo lo que tienes es un martillo [sic] ... todo parece un clavo" :)
Gone Coding

¡Es hora del martillo! Gracias por compartir esta biblioteca, ¡fue fácil de instalar en mi aplicación y comenzar a funcionar! Tomó un segundo configurarlo porque el controlador de eventos es diferente, pero un simple console.log (evento) le dice lo que necesita. ¡GRACIAS!
Andy

24

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.


2
Esta solución parece ser la más sencilla que he encontrado y parece funcionar muy bien en iOS.
Joshua Lawrence Austill

Primero utilicé jquery mobile, pero luego interfirió con otras funcionalidades. Estoy usando esto ahora y funciona perfecto. No hay problemas hasta ahora.
Anurag Priyadarshi

18

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
  }
});

excepto que .bindestá en desuso. Deberías usar.on
jcuenod

15

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.


Gracias por darme tu tiempo importante para mi pregunta. Estoy investigando los eventos de Jquery Mobile. Gracias.
Abhishek B.

Esos eventos no son realmente representativos de la interacción táctil real.
trusktr

¿Es jQuery Core un nombre propio real?
Peter Mortensen

6

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>

También he añadido esto para detectar la cantidad de tiempo transcurrido desde el último evento ..document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
hanamj

3

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.