JSFiddle - React, Tailwind, and code Playground
HTML
<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);