javascript - Touchend 不起作用，即使在调用 e.preventDefault() 之后也是如此

Question

好吧，我陷入了一个大困境。

我偶然发现了 touchend 错误。 touchmove 之后，无论我做什么，touchend 事件都不起作用。

我尝试在 touchmove 中添加 preventDefault()。我还尝试用 touchcancel 替换 touchend 。一切都失败了。我读到这与支持触摸的设备中的滚动有关，但到目前为止我还没有找到任何有效的解决方案。

我知道这个问题可以用 JQuery 解决，但我更喜欢用 Vanilla JS 的方式来解决这个问题，这样我就可以了解幕后发生的事情。

var touchActive = false;

elem.addEventListener("touchstart", function (event) {
    touchActive = true;
});
elem.addEventListener("touchend", function (event) {
    touchActive = false;
});
elem.addEventListener("touchmove", function (event) {
    if(touchActive){
    }
    else{
    }
});

那么为什么 touchend 不起作用呢？

Answer 1

如果您使用的是 Android < 6.0，那么您将被迫同时使用 touchstart 和 touchmove 事件，否则除非您考虑集成 PreventDefault，否则不可能结束事件。后者可能会影响您的滚动，所以这是我的解决方案:

https://jsfiddle.net/z9p7uxp2/

var x = document.getElementsByTagName('div')[0];

document.getElementsByTagName('div')[0].addEventListener("touchend", function (event) {
    x.style.background = "black"
});
document.getElementsByTagName('div')[0].addEventListener("touchcancel", function (event) {
    x.style.background = "black"
});
document.getElementsByTagName('div')[0].addEventListener("touchmove", function (event) {
    x.style.background = "red"
});