vue 长按事件方案

CSS

 /*去除长按出现的文字复制影响*/
      -webkit-touch-callout:none;
      -webkit-user-select:none;
      -khtml-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;

html

 <div class="main_content" @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend">

methods

长按会与短按 冲突 可定义一个状态进行区分

 	isclick:true,  每次数据刷新 都为true
    islongClick:false,  

/**
         * @Description: 长按事件
         */
        gotouchstart() {
          this.islongClick  = true
          clearTimeout(this.timeOut);
          this.timeOut = setTimeout(function () {
            //that.actionSheetShow=true;//修改删除弹窗出现
            console.log('在这里执行长按事件');
            this.islongClick = false;
              this.isclick=false;
          }, 1000);
        },
        /**
         * @Description: 短按事件————手释放，如果在1000毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
         */
        gotouchend() {
          clearTimeout(this.timeOut)
         if ( this.isclick) {
            console.log('短按就行了');
          }
        },
        /**
         * @Description: 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
         */
        gotouchmove() {
          this.islongClick= false;
          this.isclick=false;
          console.log('手指移动了');
          clearTimeout(this.timeOut);
        },
        // 项目销毁前清除定时器
        beforeDestroy() {
          this.islongClick= false;
          this.isclick=false;
          clearTimeout(this.timeOut);
        },