vue中解决用户双击鼠标触发事件

1.可能在业务中会碰见这样的事情就是用户双击可以触发事件单击也可以触发事件问题是俩次要触发不同的事件

其实双击和单击的却别就是双击是俩次时间间隔特别小的点击组成的这样我们可以通过一次性定时器完成

通过绑定一次方法来实现不同的操作

页面上

<button @click="click">用户单击/双击</button> // 用户单击和双击都会触发click事件但执行不同的操作

首先在定义一个

var timer=null;

data(){

dbClick:false

}

// 一般俩次点击时间间隔小于300 视为用户双击了

click(){

clearTimeout(timer); // 这里防抖节流存在之前的定时器先清除掉

this.dbClick=!this.dbClick; // 第一次点击先取反

timer=setTimeout(()=>{ // 使用异步函数的操作

if(this.dbClick==true){ // 如果在300毫秒内用户没有点击那么就是 true

console.log('用户点击')

}else{ // 否则用户再一次点击了将其转换成初始的false状态就是双击了

console.log('用户双击')

}

this.dbClick=false; // 让其重新归位保持原来的样式如果不归位变成 true的话后面会出问题

},300)

上面这种方法是用定时器模拟双击事件

2.或者使用vue自带的双击事件 @dblclick="dblclick"

dblclick(){

console.log('用户双击')

}

vue中解决用户双击鼠标触发事件相关推荐

vue中监听enter键触发事件
created(){window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } methods: {handl ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
Vue中失去焦点时所触发的事件
Vue中失去焦点时所触发的事件 1-html.失去焦点 <input type="text" onBlur="txtblur()"> <scr ...
在C#中使用代理的方式触发事件 (委托和事件 ) （转）
From: http://www.cnblogs.com/gzhnan/articles/1859477.html 在C#中使用代理的方式触发事件 (委托和事件 ) 事件(event)是一个非常重要 ...
html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
javascript鼠标双击时触发事件大全
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

vue中解决用户双击鼠标触发事件

vue中解决用户双击鼠标触发事件相关推荐

最新文章

热门文章