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

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

查看更多关于vue长按事件和点击事件冲突的解决的详细内容...