vue.js：如何处理同一元素上的click和dblclick事件 [英] vue.js: how to handle click and dblclick events on same element

问题描述

我有一个vue组件，其中包含click / dblclik的单独事件。单击（de）选择行，dblclick打开编辑表单。

I have a vue component with separate events for click/dblclik. 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)"
>

这样做，我点击双击就发了3个事件。两次点击事件，最后一次是dblclick。由于点击事件首先触发，是否有一种方法（短暂的推迟点击事件的固定数量的ms），以便在双击时停止点击事件的传播？

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 ?

小提琴这里

推荐答案

正如评论中所建议的，您可以通过设置一段特定时间的计时器（比如x）来模拟dblclick事件。如果我们在该时间段内没有再次点击，请转到single_click_function（）。如果我们得到一个，请调用double_click_function（）。收到第二次点击后，计时器将被清除。它也会在x毫秒失效后被清除。

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.

见下面的代码和工作小提琴。

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;
          }         
        }      
     }
});

这篇关于vue.js：如何处理同一元素上的click和dblclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！