jquery - 如何使用 jquery-mobile 获取点击事件的位置/坐标？

Question

Jquery-mobile 支持这些事件：

http://jquerymobile.com/demos/1.0a3/docs/api/events.html

如何在移动设备上获取点击事件的位置（例如在图像中）？

$('#myimg').bind('tap', function(e){
  var x = ???;
  var y = ???;

  alert([x, y]);
})

Answer 1

你不会得到 pageX & pageY 的原因是你得到了不包含任何坐标信息的 touchcancel 事件（毕竟它是非触摸的）。这不是实际的点击或点击，它是一个没有移动（超过阈值）并且足够快的触摸事件。

我在使用 jQuery 的 touchswipe 插件时遇到了同样的事情，我不得不通过将坐标存储在 touchstart 事件上并在取消事件上检索它以便能够提取坐标来解决它。

您将希望将这些保存在开始事件中（jquery mobile 中的“vmousedown”？）：

  event.touches[0].pageX
  event.touches[0].pageY

此外，在移动设备上，您应该将坐标乘以window.devicePixelRatio以获得屏幕上的准确位置。

Answer 2

我不知道 Jquery 移动，但我只是尝试了一个画布演示页面，我在我的 iphone 中得到......你只需单击并绘制圆圈，它就可以正常工作。

我只是像上面所说的那样使用 e.pageX 和 e.pageY

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    x -= Ccanvas.offsetLeft;
    y -= Ccanvas.offsetTop;

    var Point = {
        x: x,
        y: y
        };
    return Point;
}