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

Question

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

<ul class="data_row"   v-for="(row,index) in gridData"   @dblclick="showEditForm(row,$event)"   @click="rowSelect(row,$event)" > 

Doing it like this, i get 3 events fired on double click. Two click events and lastly one dblclick. Since the click event fires first , is there a way (short of deferring click event for a fixed amount of ms) for stopping propagation of click event on double click ?

Fiddle here

Answer 1

As suggested in comments, You can simulate the dblclick event by setting up a timer for a certain period of time(say x).

• If we do not get another click during that time span, go for the single_click_function().
• If we do get one, call double_click_function().
• Timer will be cleared once the second click is received.
• It will also be cleared once x milliseconds are lapsed.

See below code and working fiddle.

new Vue({     el: '#app',     data: {         result: [],         delay: 700,         clicks: 0,         timer: null     },          mounted: function() {         console.log('mounted');      },            methods: {         oneClick(event) {           this.clicks++;           if (this.clicks === 1) {             this.timer = setTimeout( () => {               this.result.push(event.type);               this.clicks = 0             }, this.delay);           } else {              clearTimeout(this.timer);                this.result.push('dblclick');              this.clicks = 0;           }                  }            } }); 

Answer 2

<div id="example-1">  <button v-on:dblclick="counter += 1, funcao()">Add 1</button>    <p>The button above has been clicked {{ counter }} times.</p> </div> 

var example1 = new Vue({  el: '#example-1',  data: {    counter: 0  },  methods: {    funcao: function(){      alert("Sou uma funcao");    }  } }) 

check out this working fiddle https://codepen.io/robertourias/pen/LxVNZX