vue.js: how to handle click and dblclick events on same element

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.

See below code and working fiddle.

new Vue({
    el: '#app',
    data: {
        result: [],
        delay: 700,
        clicks: 0,
        timer: null
    },    
     mounted: function() {
        console.log('mounted');
     },      
     methods: {
        oneClick(event) {
          this.clicks++;
          if (this.clicks === 1) {
            this.timer = setTimeout( () => {
              this.result.push(event.type);
              this.clicks = 0
            }, this.delay);
          } else {
             clearTimeout(this.timer);  
             this.result.push('dblclick');
             this.clicks = 0;
          }         
        }      
     }
});

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)