Javascript 在touchend事件中检索touchstart坐标

发生touchend事件时，是否可能知道触摸从何处开始（touchstart坐标）？乍一看，这看起来就像在touchstart期间保存坐标一样简单，但假设事件附加到具有特定类（即

.special

）的所有DOM元素。现在考虑我用<代码>触摸两个对象。特殊的< /代码>类，然后把我的手指从一个上抬起来。我不能只看最后保存的值，因为它可能是我举起的第一根手指

---

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

在

touchstart

上，您可以存储可能需要的所有值（如x、y、目标等）。在

touchend

上，您可以通过

Touch.identifier

值检索所有存储的值，该值对于每个触摸都应该是唯一的

我在这里创建了一个概念证明：

下面的代码仅跟踪

x

和

y

位置，但如果需要，您可以跟踪任何属性

代码背后的理念是：

在

touchstart

上创建一个对象并将所有数据存储在其中（包括触摸ID）

将此对象存储在数组中

在

touchend

上，检查触摸的id并尝试在数组中找到相应的对象

如果找到了，我们就完蛋了

以及守则：

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

var=[]；
var-cons；
美元（初始）；
函数init（）
{
cons=$（“控制台”）；
document.getElementById（“area”）.addEventListener（“touchstart”，onTouchStart）；
文件。附录列表（“触摸端”，onTouchEnd）；
文件。添加的列表器（“触摸取消”，onTouchEnd）；
}
功能启动（e）
{
e、 预防默认值（）；
var touchList=e.changedtouchs；
var-touch；
对于（变量i=0；i=0；j--）
{
if（touch[j].id==touch.id）
{
cons.html（cons.html（）；
3.拼接（j，1）；
}
}
}
}

---

上面的代码使用jQuery，但它仅用于方便在屏幕上显示结果，jQuery不用于其他任何用途。

不同的

触摸

事件可以通过

事件连接。目标

:

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

因此，您可以跟踪

事件。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;
        }
    }
}  

document.addEventListener（“touchstart”，onTouchStart）；
文件。附录列表（“触摸端”，onTouchEnd）；
文件。添加的文件列表器（“触摸取消”，onTouchCancel）；
变量目标=[]；//创建具有所有触摸目标的阵列
//但是仍然需要一些垃圾收集
函数onTouchStart（事件）{
targets.push（event.target）；//将目标添加到数组
}
函数onTouchEnd（事件）{
//循环遍历数组以找到目标
对于（变量i=0；i

---

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

为什么不在触摸启动时存储x，y，并在发布时重新获取该值……我已经更新了我的答案，希望这就是您所寻找的。@alex23感谢您的编辑。不过我还是恢复了它，因为它删除了相当重要的一部分功能（代码会抛出错误）。