vue.js：同じ要素のclickイベントとdblclickイベントを処理する方法

Question

click/dblclikの個別のイベントを持つvueコンポーネントがあります。シングルクリック（de）は行を選択し、dblclickは編集フォームを開きます。

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

このようにすると、ダブルクリックで3つのイベントが発生します。 2回のクリックイベントと最後に1回のdblclick。クリックイベントが最初に発生するので、ダブルクリックでクリックイベントの伝播を停止するための方法（固定量のmsのクリックイベントを延期するのに不足していますか）はありますか？

コメントで示唆したようにフィドルhere

Answer 1

、あなたが一定時間のタイマーを設定することにより、DBLCLICKイベントをシミュレートすることができます（たとえばX）。その期間中に別のクリックがない場合は、single_click_function（）を参照してください。それを取得した場合は、double_click_function（）を呼び出します。 2回目のクリックが受信されると、タイマーはクリアされます。また、ミリ秒が経過するとクリアされます。

以下のコードを参照して作業してください。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; 
      }   
     }  
    } 
});