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.由于点击事件首先触发,是否有一种方法(短暂的推迟点击事件的固定数量的ms),以便在双击时停止点击事件的传播？

在这里小提琴

Answer 1

正如评论中所建议的那样,您可以通过在特定时间段(例如x)设置计时器来模拟dblclick事件.如果我们在该时间段内没有再次点击,请转到single_click_function().如果我们得到一个,请调用double_click_function().收到第二次点击后,计时器将被清除.一旦经过x毫秒,它也将被清除.

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

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

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

看看这个工作小提琴https://codepen.io/robertourias/pen/LxVNZX

Answer 3

我认为我有一个更简单的解决方案（我使用的是 vue-class 但适用相同的原则）：

private timeoutId = null;
onClick() {
        if(!this.timeoutId)
        {
            this.timeoutId = setTimeout(() => {
                // simple click
            }, 50);//tolerance in ms
        }else{
            clearTimeout(this.timeoutId);
            // double click
        }
    }

它不需要计算点击次数。

Answer 4

单击和单击之间的时间必须很短。

为了获得点击和双击，只需要一个计数器来承载点击次数（例如0.2s），当用户缓慢点击或多次点击时，就足以捕获用户的意图双击或默认情况。

我在这里留下了如何实现这些功能的代码。

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 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>

<div id='app'>
  <button @click='detectClick'>
    Test Click Event, num clicks
    <span>{{ numClicks }}</span>
   </button>
  <h2>Last Event: <span>{{ msg }}</span></h2>
</div>

Answer 5

我使用这种方法来解决同样的问题。我使用的 Promise 可以通过触发 200 毫秒的超时或通过检测到第二次点击来解决。它在我最近的网络应用程序中运行得很好。

<div id="app">
  <div 
    @click="clicked().then((text) => {clickType = text})">
      {{clickType}}
  </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    click: undefined,
    clickType: 'Click or Doubleclick ME'
  },
  methods: {
    clicked () {
      return new Promise ((resolve, reject) => {
        if (this.click) {
          clearTimeout(this.click)
          resolve('Detected DoubleClick')
        }
        this.click = setTimeout(() => {
         this.click = undefined
         resolve('Detected SingleClick')
        }, 200)
      })
    }
  }
})
</script>

工作小提琴： https://jsfiddle.net/MapletoneMartin/9m62Lrwf/