Vue中,当组件同时注册单机事件(@click)和双击事件(@dblclick)时,处理事件冲突

背景:

示例代码:

<template>
  <div >
    <button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    clickHandler() {
      console.log('单机事件')
    },
    dblclickHandler() {
      console.log('双击事件')
    }

  }
}
</script>

<style>

</style>

事件冲突演示:

如上示例,在单机按钮时,会触发单机事件处理函数,在双击按钮时,会触发2次单机事件处理函数和1次双击事件处理函数

解决办法

利用计时器,在大概时间模拟双击事件

代码:

<template>
  <div>
    <button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    clickHandler() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log('单机事件')
      }, 300)
    },
    dblclickHandler() {
      clearTimeout(this.timer)
      console.log('双击事件')
    }

  }
}
</script>

<style>

</style>

效果图:

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注