Navegador Android: touchcancel está siendo disparado aunque touchmove tiene preventDefault

Estoy tratando de construir una página web que detecta el toque del usuario y arrastra y el objeto a lo largo del lienzo.

Así que estoy haciendo algo como esto:

var touchStart = function(e) { e.preventDefault(); // Do stuff } var touchMove = function(e) { e.preventDefault(); console.log("Touch move"); // Move objs } var touchEnd = function(e) { e.preventDefault(); console.log("Touch start!"); // clean up stuff } var touchCancel = function(e) { e.preventDefault(); // Oh NO touch cancel! console.log("Touch cancel!"); } bindElemOrig.addEventListener('touchstart', touchStart, false); bindElemOrig.addEventListener('touchmove', touchStart, false); bindElemOrig.addEventListener('touchend', touchStart, false); bindElemOrig.addEventListener('touchcancel', touchStart, false); 

Funciona bien hasta cierto punto.

El problema es que tan pronto como cargue demasiados objs, me parece que el touchmove tarda demasiado tiempo en responder, y touchcancel se dispara. El problema es que tan pronto como touchcancel se dispara no recibo más touchmove s eventos, y no puedo sentir el movimiento más.

¿Alguien se enfrentó a este problema? Sé sobre el error en Android, donde debe llamar a preventDefault ( touchend evento en ios webkit no disparar? ), Pero en este caso, parece que no está funcionando debido a la carga de memoria.

¡Gracias!

Me gusta esto

 var touchMove = function(e) { e.preventDefault(); setTimeout(function(){ console.log("Touch move"); // Move objs }) } 

Use setTimeout para envolver su lógica en touchmove puede resolver este problema

Este problema puede deberse a un error (característica?) En Chrome / Android. Consulte este informe de errores .

Esta prueba demuestra el comportamiento ( JSFiddle ):

 <!DOCTYPE html> <html> <head> <title></title> <script> var delay = 200; var haltEvent = function(event) { event.preventDefault(); event.stopPropagation(); }; var pause = function() { var startTime = new Date().getTime(); while (new Date().getTime() < startTime + delay); }; window.addEventListener('load', function() { var target = document.querySelector('#target'); var status = document.querySelector('#status'); target.addEventListener('touchstart', function(event) { haltEvent(event); status.innerHTML = '[touchstart]'; }, true); target.addEventListener('touchmove', function(event) { pause(); haltEvent(event); status.innerHTML = '[touchmove]'; }, true); target.addEventListener('touchend', function(event) { status.innerHTML = '[touchend]'; }, true); target.addEventListener('touchcancel', function(event) { status.innerHTML = '[touchcancel]'; }, true); }); </script> <style> #target { background-color: green; height: 300px; } #status { text-align: center; } </style> </head> <body> <div id="target"></div> <p id="status">[]</p> </body> </html> 

No encuentro el evento touchcancel para ser disparado al azar. En su lugar, se dispara cuando se tarda ~ 200 ms para volver de un controlador de eventos touchmove.

  • El navegador Droid causa estragos en mi sitio
  • Android 2.3.4 - La contraseña de tipo de entrada de HTML tiene frontera en el enfoque
  • ¿Incluyendo la versión webkit utilizada en el navegador Android?
  • ¿Qué hacen exactamente setUseWideViewPort () y setLoadWithOverviewMode ()?
  • Comportamiento extraño en el navegador de Android al seleccionar campos
  • Navegador Android: Javascript window.innerWidth devuelve un valor incorrecto
  • Android: NullPointerException en la vista web
  • ¿Alternativas a window.scrollMaxY?
  • ¿Por qué es el evento touchstart después de hacer clic?
  • Android cómo oler el tamaño de la pantalla de navegador webkit?
  • -webkit-transform no funciona en la vista web de Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.