我正在开发一个 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.
提前感谢您的帮助。
最佳答案
我不确定这是否显而易见,但这是一个调试起来很有趣的问题。所以基本上,困惑归结于这个人:
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
实例具有最新状态。
关于javascript - 触摸事件 "touchstart"在 Mobile Safari 上返回错误位置。解决方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23586944/