javascript - 使用 JavaScript 确定平板电脑上的触摸位置

Question

我有一个名为“元素”的对象。如果有人触摸平板电脑，我想返回触摸位置相对于对象 i 的 x 和 y 坐标。 e.对象左上角的坐标为 x=0 和 y=0。

我知道如何在桌面上实现它:

$(function() {
$(document).mousedown(function(e) {
  var offset = $("#element").offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert(relativeX+':'+relativeY);
  $(".position").val("afaf");
});
});

所以我猜“mousedown”这个词应该用“touchstart”代替。但是，它仍然不起作用。

如何更改上面的代码，使其适用于使用“touchstart”而不是“mousedown”的平板电脑？

Answer 1

更新:参见Daniel Lavedonio de Lima's answer下面

您必须明确地从事件中拉出一个touches 对象，它不直接包含坐标。查看下面代码的第二行。

这是我经常用来获取触摸/指针坐标的代码:

    if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        x = touch.pageX;
        y = touch.pageY;
    } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        x = e.clientX;
        y = e.clientY;
    }

将它放在一个监听任何或所有这些事件的事件监听器中，并添加您的偏移量计算，这应该可以工作。