Question

177

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

rated 0 times [ 179] [ 2] / answers: 1 / hits: 92936 / 8 Years ago, fri, december 23, 2016, 12:00:00

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

>

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 ?

Fiddle here

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

draven

Add To Favorites

Follow

Total Points: 641

Total Questions: 101

Total Answers: 110

Location: Nicaragua

Member since Mon, Sep 26, 2022

2 Years ago

answered 8 Years ago devinjadong · Accepted Answer

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;

          }         

        }      

     }

});