vue长按事件和点击事件冲突的解决_vue.js

    <div v-for="(item, index) in List" class="flex a-center j-center" >
           <van-tag   v-if="!item.selected"
           @touchstart.prevent="goTouch(item.name)"  
           @touchend.prevent="outTouch(index)"
            >
            <span >{{ item.name }}</span>
            </van-tag>
        
            <van-tag v-if="item.selected"   color="blue" 
             @touchstart.prevent="goTouch(item.name)"
             @touchend.prevent="outTouch(index)" 
             >
            <span>{{ item.name }}</span>
            </van-tag>
    </div>

data(){
 return{
 timer:0
 }
},
methods:{
//touchstart 事件
goTouch(v) {
      this.timer = setTimeout(() => {
        this.timer = 0
        //执行长按事件
      }, 1000);
      return false
 },
 
 //touchend事件
    outTouch(index) {
      clearTimeout(this.timer);
      if(this.timer!=0){
      //执行单次点击事件
      }
      return false
 }
}

  <div
          class="main_content"
          @mousedown="loopZoom()"
          @mouseup="clearLoopZoom()"
          @click="handlerZoom()"
        >
          测试长按
        </div>

   handlerZoom() {
        if (this.flag) {
          console.log('执行click事件')
        }
        this.flag = false
    },
    loopZoom() {
      console.log("长按开始咯")
      this.firstTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
      console.log("长按事件")
      }, 800);
    },
    clearLoopZoom() {
      console.log("长按结束咯")
      this.lastTime=new Date().getTime()
      if (this.lastTime - this.firstTime < 100) {
          this.flag=true
        }
      clearTimeout(this.timeOut);
      this.timeOut = "";
      clearInterval(this.setIntervals);
      this.setIntervals = "";
    },