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