1、标志位
var timer = '';
var isLongTouch = false; // 加个标志位，防止settimeout因为事件循环和实际时间有偏差
var target= document.getElementById('target');
target.addEventListener('touchstart', function () {
timer = setTimeout(function () {
isLongTouch = true;
// 处理长按事件...
}, 700);
});
target.addEventListener('touchend', function () {
clearTimeout(timer);
if (!isLongTouch) {
// 处理点击事件...
} else {
isLongTouch = false; // 重置标志位
}
});
target.addEventListener('touchmove', function () {
clearTimeout(timer)
})
2、时间差
let timer = null
let startTime = ''
let endTime = ''
const label = document.querySelector('.label')
label.addEventListener('touchstart', function () {
startTime = Date.now()
timer = setTimeout(function () {
// 处理长按事件...
}, 700)
})
label.addEventListener('touchend', function () {
endTime = Date.now()
clearTimeout(timer)
if (endTime - startTime < 700) {
// 处理点击事件
}
})
label.addEventListener('touchmove', function () {
clearTimeout(timer)
})
settimeout 700ms因为事件循环原因，导致不可能是完美的700ms，假设是702ms才执行settimeout，在700ms或者701ms的时候松手，这时候touchend里settimeout被清除了，有因为两者时间差大于700ms不会执行点击事件，这样长按和点击事件都不会执行，按了个寂寞。因为出bug的概率低，可读性强，也是一种选择，不过我还是建议用标志位。
