无法在 Android 设备上的 Javascript 中获取触摸事件的坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9585487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get coordinates of touchevents in Javascript on Android devices
提问by Stuart Lacy
I'm testing the HTML5 canvas and using Javascript to draw for touch enabled devices. While I have it working in iOS devices I cannot get it to work on Android. I have narrowed it down to event.pageX not returning the coordinates, but instead either returning 0, or undefined (based on the Browser).
我正在测试 HTML5 画布并使用 Javascript 为支持触控的设备进行绘图。虽然我让它在 iOS 设备上工作，但我无法让它在 Android 上工作。我已将其缩小到 event.pageX 不返回坐标，而是返回 0 或未定义（基于浏览器）。
I've tested it on my phone running Cyanogen 7.1 in Opera Mobile and Dolphin browser, and also on a Galaxy Tab 10.1 (Android 3.1) running the standard browser.
我已经在运行 Cyanogen 7.1 的 Opera Mobile 和 Dolphin 浏览器的手机上以及运行标准浏览器的 Galaxy Tab 10.1 (Android 3.1) 上对其进行了测试。
I've modified the code to show an alert on a touchstart event displaying the event.pageX, event.layerX and event.clientX coordinates (I'm aware that clientX should only work on iOS).
我修改了代码以在显示 event.pageX、event.layerX 和 event.clientX 坐标的 touchstart 事件上显示警报（我知道 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);
}
});
I've got the full drawing working in iOS but can't even get Android to register the coordinates, any ideas?
我有完整的绘图在 iOS 中工作，但甚至无法让 Android 注册坐标，有什么想法吗？
FINAL EDIT: I solved the issue, see the accepted answer.
最终编辑：我解决了这个问题，请参阅已接受的答案。
回答by Stuart Lacy
FINAL EDIT: Ok I got it working, if anyone finds this and has a similar problem you need to access the touch array within the event, and if just using a single touch (rather than multi touch) take the first item out of the array, as below, or you may need to offset it if that isn't accurate:
最终编辑：好的，我让它工作了，如果有人发现这个并且有类似的问题，你需要在事件中访问触摸阵列，如果只使用单点触摸（而不是多点触摸）从数组中取出第一个项目，如下所示，或者如果不准确，您可能需要抵消它：
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;
回答by Sebastiaan Ordelman
Didn't work for me (in iScroll 5 context). Used changedTouches[0]instead, as proposed in mouse click event.pagex is NaN in mobile chrome browser (v30.0.1599.92).
对我不起作用（在 iScroll 5 上下文中）。用来changedTouches[0]代替，如建议点击鼠标event.pagex是NaN在移动Chrome浏览器（v30.0.1599.92） 。
