您现在的位置是:网站首页> 编程资料编程资料
vue长按事件和点击事件冲突的解决_vue.js_
2023-05-24
405人已围观
简介 vue长按事件和点击事件冲突的解决_vue.js_
长按事件和点击事件冲突的解决
使用场景
在使用vue做移动端开发时,遇到了长按事件和点击事件冲突的问题。
具体需求
点击标签时选中标签,再次点击时取消选择,因标签名称过长,长按标签使用tooltip显示完整标签名称。
代码说明
长按是用touchstart事件和touchend事件来实现的。在touchstart事件里使用setTimeout,时间设置为长按生效的时间就可以了,下面上代码。
HTML部分
关于这里的.prevent修饰符,是用来阻止默认动作。但这里我试过,不加在电脑端运行时会有异常,手机端没有影响,最好还是加上吧。
{{ item.name }} {{ item.name }}
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冲突
测试长按
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 = ""; },以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- jQuery常见动画效果实现介绍_jquery_
- Vue中keyup.enter和blur事件冲突的问题及解决_vue.js_
- JavaScript实现Tab栏切换功能详解_javascript技巧_
- 10分钟内讲解Npm脚本使用教程_JavaScript_
- 解读vue页面监听store值改变问题_vue.js_
- JavaScript作用域与作用域链使用重点讲解_javascript技巧_
- React18 中的 Suspense API使用实例详解_React_
- Node.js实现http请求服务与Mysql数据库操作方法详解_node.js_
- JavaScript DOM节点操作方式全面讲解_javascript技巧_
- TypeScript Typeof运算符的5个实用技巧详解_javascript技巧_
