Touchend 事件无法与 touches 数组一起正常工作

Question

最近我开始在 javascript 中使用触摸事件，但我遇到了一个关于 touchend 事件的奇怪问题（可能是一些显而易见的事情，我只是太笨了，无法理解它）。所以基本上，这是我的代码：

function send(e) {
    e.preventDefault();
    document.body.innerHTML = e.type + "<br>" + e.targetTouches[0].pageY;
}

['touchstart', 'touchmove', 'touchend'].forEach(function(e) {
    window.addEventListener(e, send, false);
});

现在 e.targetTouches[0].pageY 工作正常，但 e.type 将只假设 touchstart 或 touchmove 值，而不是由于某种原因的 touchend .我注意到只有当我尝试在同一行中调用 e.type 属性或从 event.targetTouches（或 event.touches）数组中读取任何属性后才会发生这种情况。这些属性不是只读的吗？为什么它会破坏我的代码？

哦，玩了几个小时后，我注意到 event.type 只有在将一根手指放在屏幕上然后用另一根手指点击它时才会采用 touchend 值，但这仍然不能解决我的问题。

Answer 1

这是因为触摸点被移除时触发了 touchend 事件。

没有接触点，没有目标触摸。

MDNTouchEvent.targetTouches

一个 TouchList 列出了所有 触摸点仍与触摸表面接触

的触摸对象

MDNtouchend

touchend 事件在 触摸点从触摸表面移除时触发

为了解决你的问题，在touchstart和touchmove时记录targetTouches，并在touch point被移除时使用：

var TargetTouches;

function send(e) {

    e.preventDefault();

    var type = e.type;
    var pageY;

    if (type !== 'touchend') {
      pageY = e.targetTouches[0].pageY;
      TargetTouches = e.targetTouches[0];
    } else {
      pageY = TargetTouches.pageY;
    }

    document.body.innerHTML = type + "<br>" + pageY;
}

['touchstart', 'touchmove', 'touchend'].forEach(function(e) {
    window.addEventListener(e, send, false);
});