vue长按事件

 html
<template>
 <div>
<div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)">长按事件</div>
  </div>
</template>
js
<script>
export default {
data() {
return {
timeOutEvent:0
}
},
mounted: function() {
},
methods: {
//开始按
          gtouchstart(item){
          var self = this;
              this.timeOutEvent = setTimeout(function(){
                  self.longPress(item)
              },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
              return false;
          },
          //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
          gtouchend(item){
              clearTimeout(this.timeOutEvent);//清除定时器
              if(this.timeOutEvent!=0){
                  //这里写要执行的内容（尤如onclick事件）
                  this.goChat(item);
              }
              return false;
          },
          //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
          gtouchmove(){
              clearTimeout(this.timeOutEvent);//清除定时器
              this.timeOutEvent = 0;

          },
          //真正长按后应该执行的内容
          longPress(id){
              this.timeOutEvent = 0;
              //执行长按要执行的内容，如弹出菜单
              console.log("执行的内容");
          },
          goChat(id){
              console.log("点击");
              
          }

}
}
</script>