Listen to single and double click event on single vue component

user_15345495 0
Viewed 450

I tried searching online though I did find an answer which is this one -> https://antenna.io/blog/2018/03/handle-single-and-double-clicks-on-the-same-element-in-vue-js/

but couldn't understand it so I can up with a solution inspired by above solution

 detectClick() {
  this.clickCount += 1;
  if (this.clickCount === 1) {
    var singleClick = setTimeout(() => {
      console.log("we are in singleClick");
      this.currentPickerDate();
      this.clickCount = 0;
    }, 500);
  }
  if (this.clickCount === 2) {
    console.log("we are in double Click");
    clearTimeout(singleClick);
    this.showEvent();
    this.clickCount = 0;
  }
}

and the component is

<v-date-picker
    v-model="date"
    @click:date="detectClick"
    :events="allEvents"
    :picker-date.sync="pickerDate"
    event-color="red lighten-2">
</v-date-picker>

I don't think currentPickerFunction is required but if you do need it let me know In detectClick function the problem is that my setTimeout function is not working i don't know why If you know a better answer let me know Thanks

I am using vue 2 and vuetify

vuejs2 vuetify.js vue.js javascript
2 Answers

@click - single click

@dblclick - double click

Edit: never mind, i misread the question

user_132153490

Because var singleClick is defined in the first if clause, it has block scope. Therefore, singleClick can not be accessed in the second if clause. You must define singleClick in global scope. You can see that clickTimer: null has been defined in data() if you look at the link that you have shared:

data () {
   return {
      clickCount: 0,
      clickTimer: null
   };
},

Check out the link about javascript scope

user_125706550
Related