h5移动端 vue 模拟长按事件

在网页中没有长按事件，但是有的页面尤其是h5页面经常需要监听长按事件，所以通过touchstart事件和touchend事件来模拟长按事件

 <!-- css -->
<div
      id="home"
      @touchstart="gotouchstart()"
      @touchmove="gotouchmove()"
      @touchend="gotouchend()"
    >
</div>
 
//js
gotouchstart() {
      let that = this;
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      this.timeOutEvent = setTimeout(function () {
        //执行长按要执行的内容，
        console.log("长按");
      }, 600); //这里设置定时
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend() {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
      }
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },