首页>内容

Vue点击事件单击和双击

小坏蛋 / / 评论 / 阅读 / 赞
作者有点忙，还没写简介

文章描述：

Vue单击和双击事件处理

vue自带的双击事件 @dblclick=”dblclick”

 

 

延时判断单击或者双击

var timer=null;
export default{
  data(){
    return{
      dbClick:false
    }
  },
  methods:{
    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)

      },
  }
}

 

 

<template>
	<!--添加单击事件和双击事件-->
    <div  @click="handleClick" @dblclick="dblClick">点击</div>
</template>

<script>
var time = null;  //  在这里定义time 为null
export default {
  data() {
      return {

      }
  },
  methods:{
      // 单击事件
      handleClick() {
        clearTimeout(time);  //首先清除计时器
        time = setTimeout(() => {
          //这里执行你自己的方法或者业务逻辑
          console.log('单击')
        },300)
      },
      // 双击事件
      dblClick(){
        clearTimeout(time);  //清除
        //这里可以添加你自己双击事件的方法或者逻辑
        console.log('双击')
      }
	}
}
</script>

 

发布时间：2023/05/24

相关阅读

发表评论

登录

最近发表