Vue模拟双击事件dblclick

通过点击次数或者时间戳实现都行:

判断条件:在300秒内有两次连续单击事件触发就是双击,否则就是单击

export default {data () {return {clickCount: 0,time: 0}},methods: {dblclick () {//使用点击次数实现,如果双击了就重置计数器进入下一次双击判断// this.clickCount++// if (this.clickCount === 2) {//   console.log('双击事件')//   this.clickCount = 0// }// 不清空会有不连续两次点击都能触发双击的bug,只要300毫秒内没有连续两次单击,就重置计数器=0方便判断下一次// setTimeout(() => {//   if (this.clickCount === 1) {//     console.log('单机事件')//     this.clickCount = 0//   }// }, 300)// 使用时间戳实现,300秒内,记录上一次单击进来的时间,然后用下次单击的时间-上次单击的时间<300毫秒的话就是双击this.time = new Date().getTime()setTimeout(() => {if (new Date().getTime() - this.time < 300) {console.log('双击事件')}}, 300)}}
}

Vue模拟双击事件dblclick相关推荐

vue给同一元素绑定单击click和双击事件dblclick，执行不同逻辑
原博:https://www.cnblogs.com/feng-xl/p/9375992.html 在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情.一开始直接clic ...
vue的双击事件(dbclick的使用)
双击事件(dblclick) vue事件中基于点击事件,有一个双击事件,通过dblclick事件触发. 语言:vue3/Ts 函数库:vueuse 1.需求分析双击事件触发: 在双击时隐藏对应文字元 ...
VUE 解决双击事件与单击事件冲突（单击模拟双击）
// 单击模拟双击操作this.clickTimes++;if (this.clickTimes === 2) { //当点击次数为2this.clickTimes = 0; //记得清零// 触发双 ...
Vue中的双击事件 @dblclick=“ “ v-on:dblclick=“ “
双击事件bd 目的:双击按钮显示相应内容 @dblclick="事件名" html部分代码如下所示 <button class="btn btn-default&q ...
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法
有时vue项目中无论是v-ondblclick:还是@dblclick ,有时会无效果.解决办法直接上代码自己看. .native主要用于监听组件根元素的原生事件 @dblclick.native= ...
解决JS双击事件dblclick触发时，同时会执行click事件中的语句
双击dblclick事件,同时会执行click事件中的语句,当需要为一个元素同时添加这两个事件时,显然这不是我们想要的结果,举个实例,在最近做的canvas开发中使用鼠标画区域,鼠标单击一下开始画,鼠 ...
js双击事件dblclick/ondblclick
js双击事件爬过的坑 <html> <head> <script type="text/javascript" src="/jquery/j ...
手机端用单击事件模拟双击事件
手机app虽然不支持双击事件,但是支持单击事件: 用单击事件实现双击 <button id="btn"></button> <script src=& ...
Vue中的双击事件 @dblclick= v-on:dblclick=
目的:双击按钮显示相应内容 @dblclick="事件名" html部分代码如下所示: <button class="btn btn-default" d ...

Vue模拟双击事件dblclick

Vue模拟双击事件dblclick相关推荐

最新文章

热门文章