touchmove обработчик после touchstart handler не работает

Question

У меня проблема с событием touchmove. Когда пользователь прикасается к дисплею (touchstart), должен выполняться обработчик события touchmove и game(), и если пользователь покидает экран, все должно быть остановлено. Но тогда условия if для collisiondetection не будут работать правильно, потому что e.pageX и e.pageY всегда имеют координаты сенсорного экрана и не будут обновлять свои значения, когда пользователь перемещает их пальцем (касание) на экране. Как я могу это исправить? demo

$("body").on({ 
    'touchstart mousedown': function (e) { 
     $(this).on('touchmove mousemove'); 

     collisiondetection = setInterval(function() { 
      var xp1 = $("#n1").position(); 
      if (e.pageY >= xp1.top && e.pageY <= xp1.top + cy * 10 && e.pageX >= xp1.left && e.pageX <= xp1.left + cx * 25) { 
       console.log("hit"); 
      } 
      var xp2 = $("#n2").position(); 
      if (e.pageY >= xp2.top && e.pageY <= xp2.top + cy * 10 && e.pageX >= xp2.left && e.pageX <= xp2.left + cx * 25) { 
       console.log("hit"); 
      } 
     },10); 

     game(); 
    }, 
    'touchend mouseup': function (e) { 
     $(this).off('touchmove mousemove'); 
    clearInterval(animaterects); 
    clearInterval(collisiondetection); 
    } 
}); 

UPDATE: Если я изменить его 'touchstart mousedown touchmove mousemove': function (e) { обнаружение столкновений и обновление координат хорошо работает, но анимация не делают.

Answer 1

Осторожно, ваш код не обновляет координаты, когда пользователи перемещают пальцы.

$("body").on({ 
    'touchstart mousedown': function (e) { 
     var pageX = e.pageX 
     var pageY = e.pageY; 
     $(this).on('touchmove mousemove',function(e){ 
      pageX = e.pageX; 
      pageY = e.pageY; 
     }); 

     collisiondetection = setInterval(function() { 
      var xp1 = $("#n1").position(); 
      if (pageY >= xp1.top && pageY <= xp1.top + cy * 10 && pageX >= xp1.left && pageX <= xp1.left + cx * 25) { 
       console.log("hit"); 
      } 
      var xp2 = $("#n2").position(); 
      if (pageY >= xp2.top && pageY <= xp2.top + cy * 10 && pageX >= xp2.left && pageX <= xp2.left + cx * 25) { 
       console.log("hit"); 
      } 
     },10); 

     game(); 
    }, 
    'touchend mouseup': function (e) { 
     $(this).off('touchmove mousemove'); 
    clearInterval(animaterects); 
    clearInterval(collisiondetection); 
    } 
});