Javascript 触摸事件“；touchstart“；在Mobile Safari上返回不正确的位置。变通办法？

我正在开发一个HTML5画布项目，在为移动设备添加多点触控支持的同时，我似乎遇到了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 }
}

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

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

功能接地（evt）
{
evt.preventDefault（）；
//忽略第一次之后的触摸。
如果（activeTouch！=null）
返回；
如果（evt.changedTouches.length>0）
{
activeTouch=evt.changedTouches[0]。标识符；
var pos=getTouchPos（evt）；
输入下降（pos）；
}
}
功能修补（evt）
{
var pos=getTouchPos（evt）；
activeTouch=null；
输入（pos）；
}
功能（evt）
{
var pos=getTouchPos（evt）；
输入移动（pos）；
}
函数getTouchPos（evt）
{
var-canX=0；
var-canY=0；
对于（var i=0；i

。。。这就是我遇到麻烦的地方！你可以看到事情变得有点棘手，但除了效率低下之外，我认为我在正确地使用一切。问题在于

getTouchPos（evt）

似乎无法在

touchstart

上获得正确的触摸X、Y位置。第一次触摸时，我得到一个0,0的位置。如果我拖动手指，

touchmove

会多次触发，并且报告的X、Y坐标看起来很好。如果我抬起手指，

touchend

启动，我也会得到一个正确的位置。但是，如果我再次触摸，

touchstart

将触发，而不是我正在触摸的位置，我将获得上次触摸结束位置的X，Y坐标

我使用了一个调试器，可以肯定的是，陈旧/未初始化的值就在我在事件数据中获得的Touch对象中。我是不是做错了什么？我不明白为什么我似乎从

touchstart

事件中得到了错误的坐标。我能做些什么来解决这个问题？是否有其他来源可用于获取正确位置？对事件顺序的细微调整

---

提前感谢您的帮助。

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

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

，然后调用函数

touchmove

（调用

inputMoved

，更新您的

posX/posY

值）

---

在您的页面上解决此问题的最简单方法就是在

touchstart

和

touchmove

中调用

inputMoved

，这样您的

MassHaver

实例就有了最新状态。

好吧，这有点尴尬！我正在从inputUp/inputDown事件中删除该位置！我猜我之前调试时完全弄错了，以为我看到了touchstart事件中的错误数据。我更新了这些事件，以便将立场传递给MassHaver，果然，这个问题在手机上消失了。非常感谢你的帮助。有时只需要第二双眼睛。没问题：）并且完全同意！好页面，顺便说一句。