javascript - 在 touchend 事件中检索 touchstart 坐标

Question

当 touchend 事件发生时，是否可以知道触摸开始的位置（touchstart 坐标）？乍一看，这看起来就像在 touchstart 期间保存坐标一样简单，但假设事件附加到具有特定类（即 . .special）的所有 DOM 元素。现在考虑我用.special班级触摸两个对象，然后将手指从一个上移开。我不能只看最后保存的值，因为它可能是我抬起的第一根手指。

在这些情况下，如何检索 touchstart 坐标？

Answer 1

您touchstart可以存储您可能需要的所有值（如 x、y、目标等）。由于每次触摸都应该是唯一touchend的值，您可以检索所有存储的值。Touch.identifier

我在这里创建了一个概念证明：http: //jsbin.com/adifit/3/

下面的代码只跟踪x和y定位，但如果需要，您可以跟踪任何属性。

代码背后的想法是：

1. touchstart创建一个对象并将所有数据存储在里面（包括触摸ID ）
2. 将此对象存储在数组中
3. 检查touchend触摸的 id 并尝试在数组中找到相应的对象
4. 如果找到比我们完成。

和代码：

var touches = [];
var cons;

$(init);

function init()
{
  cons = $("#console");
  document.getElementById("area").addEventListener("touchstart", onTouchStart);
  document.addEventListener("touchend", onTouchEnd);
  document.addEventListener("touchcancel", onTouchEnd);
}

function onTouchStart(e)
{
  e.preventDefault();
  var touchList = e.changedTouches;
  var touch;
  for(var i = 0; i < touchList.length; i++)
  {
    cons.html(cons.html() + "startX: " + touchList[i].screenX + ", id: " + touchList[i].identifier + "<br/>");
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier};
    touches.push(touch);
  }
}

function onTouchEnd(e)
{
  cons.html(cons.html() + "<strong>TouchEnd:</strong><br/>");
  var touchList = e.changedTouches;
  var touch;
  for(var i = 0; i < touchList.length; i++)
  {
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier};
    for (var j = touches.length - 1; j >= 0 ; j--)
    {
      if (touches[j].id == touch.id)
      {
        cons.html(cons.html() + "<strong>startX: "+ touches[j].x+ ", id: " + touchList[i].identifier + "</strong><br/>");
        touches.splice(j, 1);
      }
    }
  }
}

上面的代码使用了 jQuery，但它只是为了方便在屏幕上显示结果而使用的，jQuery 没有用于其他任何用途。

Answer 2

不同touch的事件可以通过event.target.

W3Ctouchmove事件规范：

此事件的目标必须与在此触摸点放置在表面上时接收到 touchstart 事件的元素相同，即使该触摸点已经移出目标元素的交互区域。

所以你跟踪event.target：

document.addEventListener("touchstart", onTouchStart);
document.addEventListener("touchend", onTouchEnd);
document.addEventListener("touchcancel", onTouchCancel);

var targets = []; // create array with all touch targets 
                  // still needs some sort of garbage collection though

function onTouchStart(event){
   targets.push(event.target); // add target to array
}

function onTouchEnd(event){
    // loop through array to find your target
    for (var i = 0; i < targets.length; i++) {
        if (targets[i] == event.target) { //test target
            // this is your match! Do something with this element
            targets[i].splice(i,1); // remove entry after event ends;
        }
    }
}

function onTouchCancel(event){
    // loop through array to find your target
    for (var i = 0; i < targets.length; i++) { 
        if (targets[i] == event.target) { //test target
            // Just delete this event
            targets[i].splice(i,1); // remove entry after event ends;
        }
    }
}  

注意：未经测试。我看到@Strah 有一个很好的解决方案，我的有点简化，只检查 event.target，而不是 touch-id。但它展示了一个类似的概念。