Question

我遇到了touchmove事件的问题。当用户触摸显示器（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);
    }
});

touchstart处理程序之后的touchmove处理程序不会工作

1 个答案: