Question

好的，我处在一个很大的困境中。

我偶然发现了那个touchend bug。触摸后，无论我做什么，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{
    }
});

那么为什么不去做工作？

Answer 1

如果您使用的是Android＆lt; 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"
});

Answer 2

我尝试使用以下内容重新创建您的方案：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style type="text/css">
        #foobar {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
        </style>
    </head>
    <body>
        <div id="foobar"></div>
        <script type="text/javascript">
        var touchActive = false;

        var elem = document.getElementById("foobar")

        elem.addEventListener("touchstart", function (event) {
            console.log("Touch Start");
            touchActive = true;
        });
        elem.addEventListener("touchend", function (event) {
            console.log("Touch End");
            touchActive = false;
        });
        elem.addEventListener("touchmove", function (event) {
            console.log("Touch Active: %s", (touchActive) ? "Yes" : "No")
            if(touchActive){
            }
            else{
            }
        });
        </script>
    </body>
</html>

我使用iOS模拟器的touchstart / touchend没有任何问题。所以，有一些事情。

当有人正在主动触摸设备时，是否需要在移动设备上跟踪touchstart / touchend？
更多的UX问题 - 请注意touchmove上的preventDefault，因为这会阻止滚动。阻止默认浏览器行为对每个人来说都是非常有问题的。
像我一样添加控制台日志记录可以帮助您调试问题，这可能是确定问题是事件调度本身或您在页面上完成的事情（例如重叠元素）的最佳方法。

即使在调用e.preventDefault（）之后，Touchend也无法工作

2 个答案: