移动端h5模拟长按事件

思路

• 放弃click事件，通过判断按的时长来决定是单击还是长按
• 使用touchstart和touchend事件
• 在touchstart中开启一个定时器，比如在700ms后显示一个长按菜单
• 在touchend中清除这个定时器，这样如果按下的时间超过700ms，那么长按菜单已经显示出来了，清除定时器不会有任何影响；如果按下的时间小于700ms，那么touchstart中的长按菜单还没来得及显示出来，就被清除了。
  由此我们可以实现模拟的长按事件了。

let timer = null
let startTime = ''
let endTime = ''

document.addEventListener('touchstart', function () {
  startTime = +new Date()
  timer = setTimeout(function () {
    // 处理长按事件
    console.log('long');
  }, 700)
})

document.addEventListener('touchend', function () {
  endTime = +new Date()
  clearTimeout(timer)
  if (endTime - startTime < 700) {
    // 处理点击事件
    console.log('no long');
  }
})