目录长按事件和点击事件冲突的解决使用场景具体需求代码说明Vue WEB端长按事件,解决和click冲突长按事件和点击事件冲突的解决 使用场景 在使用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
}
}
<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 = "";
},
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue长按事件和点击事件冲突的解决
本文链接: https://www.lsjlt.com/news/169993.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0