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

У меня есть компонент 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 при двойном щелчке?

Скриншот здесь

Ответ 1

Как предлагается в комментариях, вы можете имитировать событие dblclick, настроив таймер на определенный период времени (скажем, x). Если мы не получим еще один клик в течение этого промежутка времени, перейдите к 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;
          }         
        }      
     }
});

Ответ 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

Ответ 3

Между щелчком и щелчком должно быть мало времени.

Чтобы получить щелчок и двойной щелчок, для переноса количества нажатий требуется только один счетчик (например, 0,2 с), и этого достаточно, чтобы уловить намерение пользователя, когда он нажимает медленно или когда он выполняет несколько нажатий, что будет иметь место. двойного щелчка или случая по умолчанию.

Я оставляю здесь с кодом, как я реализую эти функции.

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>

Ответ 4

Я использую этот подход для той же проблемы. Я использую обещание, которое разрешается либо по таймауту срабатывания 200 мс, либо по обнаружению второго щелчка. Он хорошо работает в моих последних веб-приложениях.

<div id="app">
  <div 
    @click="clicked().then((text) => {clickType = text})" 
    @dblclick="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/