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

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

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

目录

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

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

使用场景

在使用vue做移动端开发时，遇到了长按事件和点击事件冲突的问题。

具体需求

点击标签时选中标签，再次点击时取消选择，因标签名称过长，长按标签使用tooltip显示完整标签名称。

代码说明

长按是用touchstart事件和touchend事件来实现的。在touchstart事件里使用setTimeout,时间设置为长按生效的时间就可以了，下面上代码。

HTML部分

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