javascript - touchstart 处理程序后的 touchmove 处理程序将无法工作

Question

我对触摸移动事件有疑问。当用户触摸显示器 (touchstart) 时，touchmove 事件处理程序和 game() 应该被执行，如果用户离开屏幕，一切都应该停止。但是 collisiondetection 间隔的 if 条件将无法正常工作，因为 e.pageX 和 e.pageY 始终具有 touchstart 的坐标并且当用户在屏幕上移动手指 (touchmove) 时不会更新它们的值。我怎样才能解决这个问题？ 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);
    }
});

更新:如果我将其编辑为 '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);
    }
});