Javascript -在长时间触摸时做一些事情，在触摸端停止(Android)

Javascript - Do something during long touch, stop on touch end (Android)

本文关键字：触摸 Android 长时间 Javascript      更新时间：2023-09-26

我想要完成的是一个输入数字字段，只要在触摸屏上按住按钮，它就会增加，并且在按钮被释放时停止增加。

<button id="inc-val">+</button>
<input id="qty-bottom" value="1">
Javascript

var node = document.getElementById('inc-val');
var longpress = false;
var timer = null;
var longtarget = null;
var cancel = function (e) {
clearTimeout(timer);
clearInterval(increm);

};
var click = function (e) {
if (timer !== null) {
    clearTimeout(timer);
    clearInterval(increm);
}
if (longpress) {
    return false;
}
document.getElementById('qty-bottom').value++;
};
var start = function (e) {
console.log(e);
if (e.type === "click" && e.button !== 0) {
    return;
}
longpress = false;
timer = setTimeout(function () {
    increm = setInterval(function () {
        document.getElementById('qty-bottom').value++;
    }, 300);
}, 10);
return false;
};
node.addEventListener("mousedown", start);
node.addEventListener("touchstart", start);
node.addEventListener("click", click);
node.addEventListener("mouseup", cancel);
node.addEventListener("mouseout", cancel);
node.addEventListener("touchend", cancel);
node.addEventListener("touchleave", cancel);
node.addEventListener("touchcancel", cancel);
到目前为止，

在台式机和Safari中的iPhone上都可以完美地工作。我遇到的问题是如何让它在Android上运行。在Android设备(Chrome)上，每当我松开+号或将手指从按钮上拖出时，它就会不断地增加。

这是一把小提琴:

https://jsfiddle.net/s77vsLxp/

(结果页更容易在Android上使用)https://jsfiddle.net/s77vsLxp/embedded/result/

我的最终目标是让它使单个短按将值提高1，而按住每300ms将值提高1。

它看起来像长按Chrome Android导致mousedown和touchstart火，这是导致setInterval被调用两次。一种修复方法是在调用setTimeout/setInterval的地方设置一个保护，然后在取消时将timer设置为null。

见https://jsfiddle.net/4je2n3e8/

相关文章：