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

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