Vue模拟双击事件dblclick

最新推荐文章于 2024-07-22 18:27:55 发布

williamyi74

最新推荐文章于 2024-07-22 18:27:55 发布

阅读量1.8k

点赞数 4

分类专栏： js vue

本文链接：https://blog.csdn.net/Suk__/article/details/114192481

版权

js 同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

vue

33 篇文章 1 订阅

订阅专栏

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

判断条件:在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)
    }
  }
}