javascript - 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 事件被触发。

没有接触点，没有 targetTouches。

MDN TouchEvent.targetTouches

TouchList 列出触摸点的所有 Touch 对象，这些对象仍与触摸表面接触

MDN touchend

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

为了解决你的问题，在touchstart和touchmove时记录targetTouches，并在触摸点移除时使用它:

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