Question

我正在测试HTML5画布并使用Javascript来绘制支持触控的设备。虽然我在iOS设备上工作但我无法在Android上使用它。我把它缩小到event.pageX没有返回坐标，而是返回0或未定义（基于浏览器）。

我在Opera Mobile和Dolphin浏览器上运行Cyanogen 7.1的手机上测试了它，并在运行标准浏览器的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注册坐标，任何想法？

最终编辑：我解决了这个问题，看到了接受的答案。

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;

Answer 2

没有为我工作（在iScroll 5上下文中）。改为使用changedTouches[0]，如mouse click event.pagex is NaN in mobile chrome browser (v30.0.1599.92)中提议的那样。

无法在Android设备上获取Javascript中的touchevents坐标

2 个答案: