javascript - Touchend事件无法与touches数组一起正常使用

最近，我开始使用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值，但这仍然不能解决我的问题。

最佳答案

这是因为移除触摸点时会触发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);
});

关于javascript - Touchend事件无法与touches数组一起正常使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46263622/