JavaScript en iOS: preventDefault en el inicio de tacto sin deshabilitar el desplazamiento

Estoy trabajando con JavaScript y jQuery en un UIWevView en iOS.

Agregué un controller de events de javascript que me permite capturar un evento de toque y espera para mostrar un post cuando alguien toca un img por un time:

$(document).ready(function() { var timeoutId = 0; var messageAppeanetworking = false; $('img').on('touchstart', function(event) { event.preventDefault(); timeoutId = setTimeout(function() { /* Show message ... */ messageAppeanetworking = true; }, 1000); }).on('touchend touchcancel', function(event) { if (messageAppeanetworking) { event.preventDefault(); } else { clearTimeout(timeoutId); } messageAppeanetworking = false; }); }); 

Esto funciona bien para mostrar el post. Agregué los dos "event.preventDefault ();" líneas para detener imágenes dentro de los enlaces para activar el enlace.

El problema es: Esto también parece evitar que los events de arrastre para desplazarse por la página ocurran normalmente, de modo que el usuario no pueda desplazarse cuando su pase comienza en una img.

¿Cómo podría deshabilitar la acción pnetworkingeterminada del enlace sin interferir con el desplazamiento?

Me pones en el path correcto Stefan, haciéndome pensar al revés. Para cualquiera que todavía se rasca la cabeza por esto, aquí está mi solución.

Estaba tratando de permitir a los visitantes desplazarse por las imágenes horizontalmente, sin romper el desplazamiento vertical. Pero estaba ejecutando funciones personalizadas y esperando que sucediera un desplazamiento vertical. En cambio, deberíamos permitir primero el comportamiento regular y esperar que ocurra un gesto específico como lo hizo Stefan.

Por ejemplo:

 $("img").on("touchstart", function(e) { var touchStart = touchEnd = e.originalEvent.touches[0].pageX; var touchExceeded = false; $(this).on("touchmove", function(e) { touchEnd = e.originalEvent.touches[0].pageX; if(touchExceeded || touchStart - touchEnd > 50 || touchEnd - touchStart > 50) { e.preventDefault(); touchExceeded = true; // Execute your custom function. } }); $(this).on("touchend", function(e) { $(this).off("touchmove touchend"); }); }); 

Entonces, básicamente, permitimos el comportamiento pnetworkingeterminado hasta que el movimiento horizontal supere los 50 píxeles.

La variable touchExceeded garantiza que nuestra function aún funcione si reingresamos al área inicial de <50 píxeles.

(Tenga en count que este es el código de ejemplo, e.originalEvent.touches[0].pageX NO es compatible con el browser cruzado).

A veces tienes que hacer una pregunta sobre el desbordamiento de stack para encontrar la respuesta tú mismo. De hecho, hay una solución a mi problema, y ​​es la siguiente:

 $(document).ready(function() { var timeoutId = 0; $('img').on('touchstart', function(event) { var imgElement = this; timeoutId = setTimeout(function() { $(imgElement).one('click', function(event) { event.preventDefault(); }); /* Show message ... */ }, 1000); }).on('touchend touchcancel', function(event) { clearTimeout(timeoutId); }); }); 

Explicación

  • No preventDefault () en los manejadores de events táctiles. Esto trae un comportamiento de desplazamiento (por supuesto).
  • Maneje un evento de clic normal una vez si apareció el post y evite que sea una acción pnetworkingeterminada.

Podría ver una biblioteca de gestos como hammer.js que cubre todos los events de gestos principales en todos los dispositivos.