vue长按事件 touch

1.首先特别要注意的一点就是，在移动端存在其默认的长按事件（比如：文字部分的长按选择文字），这便容易和我们的业务需求产生冲突，我们首先要做的就是先去掉它（可以加在App.vue的全局默认样式中，以便达到更好的效果）。

-webkit-touch-callout: none !important;
-webkit-user-select: none;

 2.标签部分

<p
   @touchstart.prevent="gtouchstart(item)" //阻止浏览器默认
   @touchmove="gtouchmove()"
   @touchend="gtouchEnd(item)"
 >测试</p>

  data(){
    return{
        timeOutEvent:0
          }
    }
//长按事件（起始）
    gtouchstart(item) {
      this.timeOutEvent = setTimeout(()=> {
       this.longPress(item);
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gtouchEnd(item) {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（如onclick事件）
        console.log("点击但未长按");
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress(val) {
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      console.log("长按");
    },