Handle single and double clicks on the same element in Vue.js

I was looking for a way to handle single click and double click events on the same element in Vue.js. At first it looked like 'v-on:dblclick' is going to cover this requirement nicely, but I soon discovered it's not ideal. While double clicking the 'click' event fires too (as soon as the first click of an intended double click is registered), which makes it hard to handle both types of events at the same time.

In the end I came up with a component, which relies on the 'click' event to handle both single and double clicks.

export default {
  render (createElement) {
    return createElement(
        on: Object.assign(this.$listeners, {
          click: this.handleClick
  data () {
    return {
      clickCount: 0,
      clickTimer: null
  props: {
    tag: {
      type: String,
      default: 'a'
    delay: {
      type: Number,
      default: 250
  methods: {
    handleClick (e) {


      if (this.clickCount === 1) {
        this.clickTimer = setTimeout(() => {
          this.clickCount = 0
        }, this.delay)
      } else if (this.clickCount === 2) {
        this.clickCount = 0

The component emits 'single-click' and 'double-click' events:

<double-click @single-click="doThis" @double-click="doThat">
  your content goes here


Did you like this post?
Previous post

I'm interested in functional programming lately and was happy to discover that modifying array keys in PHP can be done avoiding any kind of loops. 😃

Next post

Let's take a hypothetical JSON object that holds various pieces of data and describes a request for currency conversion. Then let's explore how JSON Schema can help with the validation of its structure.