Navigateur Android: touchcancel étant déclenché tout le monde tactile a empêchéDefault

J'essaie de construire une page Web qui détecte le contact de l'utilisateur et qui traîne et s'inspire le long du canevas.

Je fais donc quelque chose comme ça:

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

Cela fonctionne bien jusqu'à un certain point.

Le problème est que dès que je charge trop d'objs, il me semble que le mouvement du toucher prend trop de temps pour répondre et Touchcancel se déclenche. Le problème est que dès que touchcancel est déclenché, je ne reçois plus d'événements de touchmove et je ne peux plus ressentir le mouvement.

Est-ce que quelqu'un a fait face à ce problème? Je connais le bug dans Android où vous devez appeler preventDefault (l' événement touchend dans ios webkit ne déclenchant pas? ) Mais sur ce cas, il semble que cela ne fonctionne pas en raison du fardeau de la mémoire.

Je vous remercie!

comme ça

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

Utiliser setTimeout pour vous envelopper de la logique dans touchmove peut résoudre ce problème

Ce problème peut être dû à un bug (fonctionnalité?) Dans Chrome / Android. Voir ce rapport de bogue .

Ce test démontre le comportement ( 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>

Je ne trouve pas l'événement touchcancel à déclencher au hasard. Au lieu de cela, il est déclenché chaque fois qu'il faut environ ~ 200 ms pour revenir d'un gestionnaire d'événements touchmove.