无法在 Android 设备上的 Javascript 中获取触摸事件的坐标

Posted 2023-02-23

【中文标题】无法在 Android 设备上的 Javascript 中获取触摸事件的坐标

【英文标题】：Can't get coordinates of touchevents in Javascript on Android devices

【发布时间】：2012-03-24 00:53:12

【问题描述】：

我正在测试 html5 画布并使用 javascript 为支持触控的设备进行绘制。虽然我让它在 ios 设备上工作，但我无法让它在 android 上工作。我已将其缩小到 event.pageX 不返回坐标，而是返回 0 或未定义（基于浏览器）。

我已经在运行 Cyanogen 7.1 的 Opera Mobile 和 Dolphin 浏览器的手机上以及运行标准浏览器的 Galaxy Tab 10.1 (Android 3.1) 上对其进行了测试。

我修改了代码以在显示 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);

);

我已经在 iOS 中完成了完整的绘图，但甚至无法让 Android 注册坐标，有什么想法吗？

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

【问题讨论】：

见this。如果你仍然不能让它工作，我猜 phoneGap 会工作的。

谢谢，这对我帮助很大！

@Stu Nice 它正在工作。您能否从您的编辑中给出答案，以便此问题离开“未回答的问题”选项卡。 :) 谢谢！

【参考方案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;

【讨论】：

对于最终出现在此处的 jQuery 用户，请改用 event.originalEvent.touches[0]...

你救了我的命。我试图在一个科尔多瓦应用程序中找到错误几个小时。终于可以在所有平台上发布了。

【参考方案2】：

对我不起作用（在 iScroll 5 上下文中）。正如mouse click event.pagex is NaN in mobile chrome browser (v30.0.1599.92) 中所建议的那样，改用changedTouches[0]。