Vue 中如何实现单击、双击、长按等事件监听？

在 Vue 中，可以使用 von 指令或者简写 @ 来监听 DOM 事件，以下是如何在 Vue 中实现单击、双击、长按等事件的详细步骤：

（图片来源网络，侵删）

1、单击事件（Click）

使用 von:click 或 @click 监听单击事件，当用户点击元素时，会触发绑定的事件处理函数。

<template>
  <button @click="handleClick">点击我</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('单击事件触发');
    },
  },
};
</script>

2、双击事件（Double Click）

由于浏览器默认不支持双击事件，我们需要自己实现一个双击事件，可以使用 setTimeout 和 clearTimeout 来实现这个功能。

<template>
  <button @dblclick="handleDoubleClick">双击我</button>
</template>
<script>
export default {
  data() {
    return {
      lastClickTime: 0,
    };
  },
  methods: {
    handleClick() {
      this.lastClickTime = Date.now();
    },
    handleDoubleClick() {
      const currentTime = Date.now();
      if (currentTime this.lastClickTime <= 300) {
        console.log('双击事件触发');
        this.lastClickTime = 0; // 重置时间戳，以便下次检测双击事件
      } else {
        this.lastClickTime = currentTime; // 如果两次点击间隔超过300毫秒，则认为是新的单击事件，重置时间戳
      }
    },
  },
};
</script>

3、长按事件（Long Press）

同样，浏览器也不支持长按事件，我们需要自己实现一个长按事件，可以使用 setTimeout 和 clearTimeout 来实现这个功能。

<template>
  <button @longpress="handleLongPress">长按我</button>
</template>
<script>
export default {
  data() {
    return {
      startTime: null,
    };
  },
  methods: {
    handleLongPress() {
      this.startTime = Date.now();
    },
    handleMouseup() {
      const currentTime = Date.now();
      if (currentTime this.startTime >= 500) { // 如果按下鼠标的时间超过500毫秒，则认为是长按事件
        console.log('长按事件触发');
      } else { // 如果按下鼠标的时间小于500毫秒，则认为是普通的单击或双击事件，重置开始时间
        this.startTime = null;
      }
    },
  },
};
</script>