html5 判断长按操作,移动端h5模拟长按事件

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的概率低，可读性强，也是一种选择，不过我还是建议用标志位。