vue.js: how to handle click and dblclick events on same element

Question

I have a vue component with separate events for click/dblclik. Single click (de)selects row, dblclick opens edit form.

Answer 1

The time must be short between click and click.

In order to get the click and double click, only one counter is required to carry the number of clicks(for example 0.2s) and it is enough to trap the user's intention when he clicks slowly or when he performs several that would be the case of the double click or default case.

I leave here with code how I implement these features.

new Vue({
   el: '#app',
   data: {numClicks:0, msg:''},
   methods: {
      // detect click event
      detectClick: function() {
        this.numClicks++;
        if (this.numClicks === 1) {          // the first click in .2s
            var self = this;
            setTimeout(function() {
                switch(self.numClicks) {     // check the event type
                      case 1:
                        self.msg = 'One click';
                        break;
                      default:
                        self.msg = 'Double click';
                }
                self.numClicks = 0;               // reset the first click
            }, 200);                              // wait 0.2s
        } // if
      }  // detectClick function
   }
});

span { color: red }

  
    Test Click Event, num clicks
    {{ numClicks }}
   
  
Last Event: {{ msg }}