Question

（未在iOS / Windows手机上测试）

我正在构建一个用于移动设备的HTML5游戏，并希望将用户的触摸输入用作操纵杆/控制器，但是我发现的每一个touchmove脚本似乎在长时间触摸后都会破坏。我只在Android设备上正确测试了这个，但我尝试了几种不同的浏览器，结果是一样的。我知道'e.preventdefault'和'width = device-width'并且我正在使用这两个但是这个bug仍然会发生。这是我正在使用的代码：

function initInput()
    {
        canvas = document.getElementById("Canvas");

        canvas.addEventListener("mousedown",mouseDown, false);
        canvas.addEventListener("mouseup", mouseUp, false);        
        canvas.addEventListener("mousemove",mouseXY, false);

        canvas.addEventListener("touchstart", touchDown, false);
        canvas.addEventListener("touchend", touchUp, false);
        canvas.addEventListener("touchcancel", touchUp, false);
        canvas.addEventListener("touchleave", touchUp, false);
        canvas.addEventListener("touchmove", touchXY, false);

    }       

    function mouseUp(e)
    {
        e.preventDefault();
        mouseIsDown = 0;
    }

    function touchUp(e)
    {
        e.preventDefault();
        mouseIsDown = 0;
    }

    function mouseDown(e)
    {
        e.preventDefault();
        mouseIsDown = 1;
        touchInitX = e.pageX - canvas.offsetLeft;
        touchInitY = e.pageY - canvas.offsetTop;
    }

    function touchDown(e)
    {
        e.preventDefault();
        mouseIsDown = 1;
        var touch = e.targetTouches[0];

        if (e.touches)
        {
            if (e.touches.length == 1)
            {
                touchInitX =  touch.pageX - touch.target.offsetLeft;
                touchInitY =  touch.pageY - touch.target.offsetTop;
            }   
        }
    }

    function mouseXY(e)
    {
            e.preventDefault();
            canvasX = e.pageX - canvas.offsetLeft;
            canvasY = e.pageY - canvas.offsetTop;
    }

    function touchXY(e) {
        e.preventDefault();
        var touch = e.targetTouches[0];

        if (e.touches) {
            if (e.touches.length == 1)
            {
                canvasX = touch.pageX - canvas.offsetLeft;
                canvasY = touch.pageY - canvas.offsetTop;
            }
        }
    }

以下是一些可以测试此行为的示例：

http://jsfiddle.net/B5wgb/8/

http://www.onlywebpro.com/demo/gamedev/mouse_detect.html

这些是我在网上找到的不同方法/脚本，到目前为止我发现的所有touchmove代码示例似乎都没有正常工作。如果您在Android设备上模拟连续拖动，则touchmove会在某个时刻中断并返回touchend，然后连续触摸touchstart，直到您松开手指以停止touchmove。这可能需要1秒或几分钟，但触摸移动总会在某个时刻中断。

任何建议/解决方案将不胜感激。谢谢

Answer 1

这是由常见的硬件/软件引起的？在索尼xperia Z系列中出现了触摸输入错误的问题。

HTML5 touchmove将永远在android上被中断

1 个答案: