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

我有一个名为“element”的对象。如果有人触摸平板电脑，我想返回触摸位置相对于对象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”的平板电脑上工作？

您必须明确地将

触摸对象从事件中拉出，它不直接包含坐标。请看下面代码的第二行

下面是我用来获取触摸/指针坐标的代码：

    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;
    }

将其放在一个事件侦听器中，该侦听器侦听任何或所有这些事件并添加偏移量计算，这应该可以正常工作。
通常您会使用例如
e.touch[0]。clientX
来处理触摸事件

非jquery解决方案，假设您具有以下HTML

<div id="touchme" style="width: 200px; height: 200px; background: blue;">

注意：以下脚本仅处理第一个（所有可能的）触摸输入

$(function(){

$('body').on('touchstart', function(e) {
  var offset = $("#element").offset();
  var t = e.targetTouches.length > 0 ? e.targetTouches.item(0) : e.touches.item(0); 
  var relativeX = t.pageX - offset.left;
  var relativeY = t.pageY - offset.top;
  console.log(relativeX+':'+relativeY);
  $(".position").val("afaf");
});

});

几乎对我有效，但我不得不做一些调整，因为当我在Google Chrome 81.0.4044.138版和Mozila Firefox 76.0.1版中测试时，
originalEvent
属性不是
事件的一部分

由于我发现一些答案直接使用
事件
和其他使用
event.originalEvent
属性，因此我添加了一个检查，如果后者未定义，则使用第一个

因此，不是：

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

我用过：

var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];

因此，完整的答案变成：

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
    var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
    var touch = evt.touches[0] || evt.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;
}

非常感谢你的帮助！它现在工作得非常好！
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
    var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
    var touch = evt.touches[0] || evt.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;
}