如何解决Vue中长按事件与点击事件冲突的问题？

本文共计653个文字，预计阅读时间需要3分钟。

目录+长按事件和点击事件处理+解决方案+使用场景+具体需求+代码说明+Vue+Web端长按事件，解决和click冲突+长按事件和点击事件处理+解决方案+使用场景+在Vue移动端开发时，遇到了长按问题

目录

• 长按事件和点击事件冲突的解决
• 使用场景
• 具体需求
• 代码说明
• vue web端长按事件，解决和click冲突

长按事件和点击事件冲突的解决

使用场景

在使用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  } }

vue web端长按事件，解决和click冲突

  <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 = "";     },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。