如何检测触摸移动长度/偏移量？答案

【问题标题】：How to detect touchmove length/offsets?如何检测触摸移动长度/偏移量？
【发布时间】：2015-11-05 15:45:57
【问题描述】：

在开发人员工具中，我可以看到touchmove 事件在执行手指移动时被多次触发*。

我正在寻找应该在其上执行 touchmove 的 div 移动解决方案 - 用于一个或两个轴的触摸移动像素的确切数量。

到目前为止我做了什么？

我尝试将匿名函数绑定到div 的touchmove 事件，期望匿名函数的e 参数会像mousemove 那样具有offsetX 和offsetY 之类的东西，所以我可以更新相应地定位div的参数。

类似这样的：

$('div').on('touchmove', function(e){
  console.log(e);
  //e has no offset or similar param known to me
});

没有结果。

我应该怎么做？

特别呼吁：我会支持任何可行的解决方案，但接受的答案是至少能给我一个起点，让我知道我应该在纯 JavaScript 中做什么，而不是像 jQuery mobile 这样的抽象。

* 我实际上是在 Chrome 开发工具中进行光标触摸仿真

【问题讨论】：

标签： javascript jquery jquery-mobile mobile touch

【解决方案1】：

我建议查看这篇文章，该文章演示了“touchmove”事件的简单设置并在 jQuery 中获取偏移位置：http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/

如果文章消失，这里是代码设置，其中偏移量是根据文章中的事件计算的。

$('#someElm').bind('touchmove',function(e){
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  var elm = $(this).offset();
  var x = touch.pageX - elm.left;
  var y = touch.pageY - elm.top;
});

希望这也有助于在纯 javascript 中找到解决方案。

【讨论】：

似乎就是我要找的东西。谢谢。
登录只是为了点赞。这里有一个看起来“更正确”的替代解决方案：stackoverflow.com/questions/17130395/…，但你的确实有效。

【解决方案2】：

这是一个非 jQuery 解决方案。

function addTouchOffsets (event) {
    var touch = event.touches[0] || event.changedTouches[0];
    var realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
    event.offsetX = touch.clientX-realTarget.getBoundingClientRect().x;
    event.offsetY = touch.clientY-realTarget.getBoundingClientRect().y
    return event;
}

【讨论】：