vue.js: как обрабатывать события click и dblclick на одном элементе

Question

У меня есть компонент vue с отдельными событиями для click/dblclik. Один щелчок (de) выбирает строку, dblclick открывает форму редактирования.

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

Выполняя это, я получаю 3 события, снятых с двойным щелчком. Два события щелчка и, наконец, один dblclick. Так как событие click срабатывает первым, существует ли способ (если не считать отложенное событие click для фиксированного количества мс) для остановки распространения события click при двойном щелчке?

Fiddle here

Answer 1

Как было предложено в комментариях, Вы можете моделировать событие DblClick путем установки таймера в течение определенного периода времени (скажем, х). Если мы не получим еще один клик в течение этого промежутка времени, перейдите к single_click_function(). Если мы его получим, вызовите double_click_function(). Таймер будет очищен после получения второго щелчка. Он также будет очищен после истечения x миллисекунд.

См. Ниже код и рабочий fiddle.

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