javascript - 触摸事件 "touchstart"在 Mobile Safari 上返回错误位置。解决方法？

Question

我正在开发一个 HTML5 Canvas 项目，在为移动设备添加多点触控支持时，我似乎在 iOS 7.1 中的 Mobile Safari 上遇到了问题。

用户与我的应用程序交互的主要方式是通过单击和拖动。在桌面上，我将适当的鼠标事件监听器添加到我的 Canvas 中...

c.addEventListener('mousedown', mouseDown, false);
c.addEventListener('mousemove', mouseMoved, false);
c.addEventListener('mouseup', mouseUp, false);

...让这些事件处理程序计算鼠标位置并调用一个更通用的函数，该函数仅接受事件的 X 和 Y 位置...

function mouseDown(evt) 
{
    var pos = getMousePos(evt);
    inputDown(pos);
}

function mouseUp(evt) 
{
    var pos = getMousePos(evt);
    inputUp(pos);
}

function mouseMoved(evt) 
{
    var pos = getMousePos(evt);
    inputMoved(pos);
}

function getMousePos(evt) 
{
    var rect = c.getBoundingClientRect();
    return { 'x': evt.clientX - rect.left, 'y': evt.clientY - rect.top }
}

...一切都很好。我设计这种抽象级别是为了方便扩展到其他输入方法。所以现在我尝试使用 Touch API 来扩展它。首先，我将处理程序添加到 Canvas 上鼠标处理程序旁边...

c.addEventListener("touchstart", touchDown, false);
c.addEventListener("touchmove", touchMoved, false);
c.addEventListener("touchend", touchUp, false);
c.addEventListener("touchcancel", touchUp, false);

...然后添加我的瘦事件处理程序来抽象触摸事件...

function touchDown(evt) 
{
    evt.preventDefault();

    // Ignore touches after the first.
    if (activeTouch != null)
        return;

    if (evt.changedTouches.length > 0)
    {
        activeTouch = evt.changedTouches[0].identifier;
        var pos = getTouchPos(evt);
        inputDown(pos);
    }
}

function touchUp(evt) 
{
    var pos = getTouchPos(evt);
    activeTouch = null;
    inputUp(pos);
}

function touchMoved(evt) 
{
    var pos = getTouchPos(evt);
    inputMoved(pos);
}

function getTouchPos(evt) 
{
    var canX = 0;
    var canY = 0;

    for( var i = 0; i < evt.touches.length; i++ )
    {
        if (evt.touches[i].identifier == activeTouch)
        {
            canX = evt.touches[i].pageX - c.offsetLeft;
            canY = evt.touches[i].pageY - c.offsetTop;
            break;
        }
    }

    return { 'x': canX, 'y': canY }
}

...这就是我遇到麻烦的地方!你可以看到事情变得有点棘手，但撇开效率低下不谈，我认为我正确地使用了一切。问题是 getTouchPos(evt) 似乎无法获取 touchstart 上触摸的正确 X、Y 位置。第一次触摸时，我得到的位置是 0,0。如果我拖动手指，touchmove 会触发多次，并且报告的 X、Y 坐标看起来不错。如果我抬起手指，touchend 就会触发，我也会得到正确的位置。但是，如果我再次触摸，touchstart 会触发，而不是我正在触摸的位置，我会得到上次触摸结束位置的 X,Y 坐标!

我已经使用调试器进行了调试，果然，陈旧/未初始化的值就在我在事件数据中获得的 Touch 对象中。我做错了什么吗？我不明白为什么我似乎从 touchstart 事件中获得了错误的坐标。我可以做什么来解决这个问题？我可以使用其他来源来获得正确的位置吗？对事件顺序进行微妙的调整？

Here's a link to an online demo of the full code if you'd like to run some in-browser debug.

提前感谢您的帮助。

Answer 1

我不确定这是否显而易见，但这是一个调试起来很有趣的问题。所以基本上，困惑归结于这个人:

function mouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

对于您的鼠标事件，一切都很好，因为您必须绑定(bind)到 mousemove。

c.addEventListener('mousemove', mouseMoved, false);

哪个调用

function mouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

因此，当您移动鼠标时，您的 posX/posY 值会不断更新。 (希望您现在就看到这个问题了:)

对于 TouchEvents，当用户触摸(但不移动)时，您只会触发 touchstart 和 touchend。直到用户拖动时，touchmove 才会被调用，进而调用函数 touchMoved(调用 inputMoved - 更新您的posX/posY 值)。

在您的页面上解决此问题的最简单方法就是在 touchstart 和 touchmove 中调用 inputMoved，以便您的 MassHaver 实例具有最新状态。