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

【问题标题】：Determine touch position on tablets with JavaScript使用 JavaScript 确定平板电脑上的触摸位置
【发布时间】：2017-02-02 02:15:46
【问题描述】：

我有一个名为“元素”的对象。如果有人触摸平板电脑，我想返回触摸位置相对于对象的 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");
});
});

所以我猜应该用“touchstart”代替“mousedown”这个词。但是还是不行。

如何更改上述代码，使其在使用“touchstart”而不是“mousedown”的平板电脑上运行？

【问题讨论】：

标签： javascript position touch tablet touchstart

【解决方案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;
    }

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

【讨论】：

非常感谢您的帮助！现在可以正常使用了！

【解决方案2】：

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

由于我找到了一些直接使用event 的答案和其他使用event.originalEvent 属性的答案，我添加了一个检查以使用第一个如果后者是undefined。

所以而不是：

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

【讨论】：

【解决方案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);
});

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

【讨论】：

【解决方案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");
});

});

【讨论】：

【解决方案5】：

PointerEvent 从 IE 11 开始支持鼠标和触摸。

例如，看看 Sortable.js。

Bind events#L423

el.addEventListener('pointerdown', handler);

Get coords#L574

let touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt);
let clientX = (touch || evt).clientX;
let clientY = (touch || evt).clientY;

【讨论】：

【解决方案6】：

我调整了 Domenico 解决方案，以便在没有轨道控制的情况下为 threeJS 在 PC 和移动设备上移动相机：

window.addEventListener("touchmove", function clicked(e) {
cursor.x = e.touches[0].clientX / sizes.width - 0.5
cursor.y = -(e.touches[0].clientY / sizes.height - 0.5)});

【讨论】：