触摸事件“touchstart”在 Mobile Safari 上返回不正确的位置。解决方法？

Question

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

用户与我的应用交互的主要方式是点击和拖动。在桌面上，我将适当的鼠标事件侦听器添加到我的画布...

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 来扩展它。首先，我将我的处理程序添加到鼠标处理程序旁边的画布中......

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);
}

对于您的鼠标事件，一切正常，因为您绑定到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 实例具有最新状态。