监听单个 vue 组件的单击和双击事件答案

【问题标题】：Listen to single and double click event on single vue component监听单个 vue 组件的单击和双击事件
【发布时间】：2021-11-23 14:21:01
【问题描述】：

虽然我确实找到了答案，但我尝试在线搜索 -> https://antenna.io/blog/2018/03/handle-single-and-double-clicks-on-the-same-element-in-vue-js/

但无法理解，所以我可以提出一个受上述解决方案启发的解决方案

 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;
  }
}

组件是

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

我认为 currentPickerFunction 不是必需的，但如果您确实需要，请告诉我在 detectClick 函数中，问题是我的 setTimeout 函数不起作用我不知道为什么如果您知道更好的答案，请告诉我谢谢

我正在使用 vue 2 和 vuetify

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

因为var singleClick 是在第一个 if 子句中定义的，所以它具有块作用域。因此，singleClick 不能在第二个 if 子句中访问。您必须在全局范围内定义 singleClick。如果您查看您共享的link，您可以看到clickTimer: null 已在data() 中定义：

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

查看link 关于 javascript 范围

【讨论】：

【解决方案2】：

@click - 单击

@dblclick - 双击

编辑：没关系，我看错了问题

【讨论】：