无法在安卓设备上使用Javascript获取触摸事件的坐标

Question

我正在测试HTML5画布并使用Javascript为触摸设备绘制。虽然在iOS设备上可以工作，但我无法让它在Android上工作。我已经缩小到event.pageX不返回坐标，而是返回0或未定义（基于浏览器）。

我已在我的手机上运行Cyanogen 7.1中的Opera Mobile和Dolphin浏览器上进行了测试，并在Galaxy Tab 10.1（Android 3.1）上运行标准浏览器。

我修改了代码以显示在touchstart事件上显示event.pageX、 event.layerX和event.clientX坐标的警报（我知道clientX只能在iOS上工作）。

canvas.addEventListener('touchstart', function(e) {
if (readyToDraw){
    alert("PageX: "+e.pageX+","+e.pageY+"\n LayerX: "+e.layerX+","+e.layerY+"\n + clientX: "+e.clientX+","+e.clientY);
    // prevent the browsers default action!
    e.preventDefault();
    paint = true;
    // Get coordinates
    var c = getCoords(e);
    addClick(c.x, c.y, false);
}
});

我已经在iOS上完成了完整的绘图，但是在Android上甚至无法注册坐标，有任何想法吗？

最终编辑：我解决了这个问题，请参见被接受的答案。

- Stuart Lacy

---

请查看此链接：https://dev59.com/wVfUa4cB1Zd3GeqPIXun。如果仍无法工作，我想phoneGap会有用。 - toto2

@Stu，太好了，它正在工作。你能否从你的编辑中制作一个答案，这样这个问题就可以离开“未回答的问题”选项卡了。 :) 谢谢！ - miguel-svq

Answer 1

最终编辑：好的，我解决了它，如果有人发现这个问题并且有类似的问题，你需要在事件中访问触摸数组，如果只使用单点触控（而不是多点触控），请取出数组中的第一个项目，如下所示，或者您可能需要进行偏移如果那不准确：

var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;
// or taking offset into consideration
var x_2 = touch.pageX - canvas.offsetLeft;
var y_2 = touch.pageY - canvas.offsetTop;

- Stuart Lacy

---

对于使用jQuery的用户，使用event.originalEvent.touches[0]代替... - Shikkediel

你救了我的命。我在 Cordova 应用程序中试图找到错误数小时。最终，我可以在所有平台上发布它。 - kaiserkiwi

Answer 2

在 iScroll 5 的情况下，这对我没有用。我使用了建议中的 changedTouches[0]，参见 mouse click event.pagex is NaN in mobile chrome browser (v30.0.1599.92)。

- Sebastiaan Ordelman