Question

我有一个名为＆＃34; element＆＃34;的对象。如果有人触摸平板电脑，我想返回相对于物体的触摸位置的x和y坐标，i。即对象的左上角有坐标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");
});
});

所以＆＃34; mousedown＆＃34;应该用＆＃34; touchstart＆＃34;替换，我想。但是，它仍然无法运作。

如何更改上述代码，以便它可以在平板电脑上使用＆＃34; touchstart＆＃34;而不是＆＃34; mousedown＆＃34;？

Answer 1

Christopher Reid's answer几乎对我有用，但是我不得不作一些调整，因为在Google Chrome 81.0.4044.138和更高版本中进行测试时，originalEvent属性不是event的一部分Mozila Firefox版本76.0.1。

由于找到了一些直接使用event的答案，而另一些使用了event.originalEvent属性的答案，因此我添加了一个检查，如果第一个是 undefined ，则使用第一个。 / p>

所以代替：

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

Answer 2

您必须明确地从事件中提取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;
    }

将此内容置于侦听任何或所有这些事件的事件侦听器中，并添加偏移量计算，这应该可行。

Answer 3

通常你会使用例如e.touches[0].clientX处理触摸事件

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

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

和脚本

document.getElementById("touchme").addEventListener("touchstart",
function clicked(e) {
    var br = document.getElementById("touchme").getBoundingClientRect();
    // x & y are relative to the clicked element
    var x = e.touches[0].clientX - br.left;
    var y = e.touches[0].clientY - br.top;
    console.log("x: " + x + " y: " + y);
});

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

Answer 4

试试这个：

$(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");
});

});

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

4 个答案: