touchstart处理程序之后的touchmove处理程序不起作用

touchmove handler after touchstart handler wont work

本文关键字：程序 处理 不起作用 touchmove 之后 touchstart      更新时间：2024-01-28

我遇到了触摸移动事件的问题。当用户触摸显示器（触摸启动）时，应执行touchmove事件处理程序和game()，如果用户离开屏幕，则应停止所有操作。但是，collisiondetection间隔的if条件将不起作用，因为e.pageX和e.pageY始终具有触摸开始的坐标，并且当用户在屏幕上移动手指（触摸移动）时不会更新它们的值。我该怎么解决这个问题？演示

$("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) {，则碰撞检测和更新坐标效果良好，但动画效果不佳。

因为当用户移动手指时，您的代码不会更新坐标。

$("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);
    }
});
相关文章：