vue---长按事件和点击事件冲突的问题

• 使用场景：在使用vue做移动端开发时，遇到了长按事件和点击事件冲突的问题。
• 具体需求：点击标签时选中标签，再次点击时取消选择，因标签名称过长，长按标签使用tooltip显示完整标签名称。
• 代码说明：长按是用touchstart事件和touchend事件来实现的。在touchstart事件里使用setTimeout,时间设置为长按生效的时间就可以了，下面上代码。

HTML部分
关于这里的.prevent修饰符，是用来阻止默认动作。但这里我试过，不加在电脑端运行时会有异常，手机端没有影响，最好还是加上吧。

    <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>

JS部分
当点击标签时，timer的值不为0，执行单次点击事件，长按一秒时将timer设置为0，则只执行长按事件。这样就解决了长按事件和点击事件的冲突。

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
 }
}

前端小白，第一次写博客。请多指教。