Vue 3 引入了Composition API，为开发者提供了更灵活的数据管理和组件逻辑组织方式。在处理用户交互，尤其是单击（click）和双击（dblclick）这类常见事件时，Vue 3 提供了直观且高效的方法。本文将详细介绍如何在 Vue 3 应用中监听和处理这两种事件，同时探讨如何优雅地解决单击与双击事件冲突的问题。

1. 基础事件监听

单击事件

在Vue 3中，你可以直接在模板中使用@click指令来监听单击事件，或者在Composition API的setup()函数中使用onMounted钩子注册事件监听器。

模板方式

<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup>
function handleClick() {
  console.log('单击事件触发');
}
</script>

Composition API 方式

<template>
  <button ref="myButton">点击我</button>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const myButton = ref(null);

onMounted(() => {
  myButton.value.addEventListener('click', handleClick);
});

function handleClick() {
  console.log('单击事件触发');
}
</script>

双击事件

双击事件通过@dblclick指令监听，同样可以在模板或Composition API中实现。

模板方式

<template>
  <button @dblclick="handleDoubleClick">双击我</button>
</template>

<script setup>
function handleDoubleClick() {
  console.log('双击事件触发');
}
</script>

2. 解决单击与双击冲突

在某些场景下，单击和双击事件可能会发生冲突，例如，用户快速单击两次可能会触发一次单击和一次双击事件。为避免这种情况，可以采用计时器来区分单击和双击。

<template>
  <button @click="handleClick" @dblclick="handleDoubleClick">点击或双击我</button>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const clickTimer = ref(null);

function handleClick() {
  clearTimeout(clickTimer.value);
  clickTimer.value = setTimeout(() => {
    singleClickAction();
  }, 300); // 设定300毫秒作为判断单击和双击的间隔
}

function handleDoubleClick() {
  clearTimeout(clickTimer.value); // 清除计时器，确保单击事件不触发
  doubleClickAction();
}

function singleClickAction() {
  console.log('单击事件处理逻辑');
}

function doubleClickAction() {
  console.log('双击事件处理逻辑');
}

onMounted(() => {
  // 如果需要，可以在这里初始化一些操作
});
</script>

3. 总结

Vue 3 通过简洁的指令和强大的Composition API，使得处理单击和双击事件变得简单而高效。通过合理利用事件监听和计时器策略，可以有效避免单击与双击事件间的冲突，确保用户体验的流畅性。在实际应用中，根据具体需求灵活选择最适合的实现方式，是提升应用交互质量的关键。