vue3中，拦截双击事件的第一次点击，写一些逻辑

在 Vue 3 中，如果想要拦截双击事件的第一次点击并执行一些逻辑，你可以使用一个状态变量来跟踪第一次点击事件，并在第二次点击时阻止第一次点击逻辑的执行。以下是一个实现示例：

<template><div@mousedown="handleMouseDown"@dblclick="handleDoubleClick">双击这个区域</div>
</template><script setup>
import { ref } from 'vue';// 定义一个变量来跟踪第一次点击事件是否在冷却期内
const isCoolingDown = ref(false);function handleMouseDown(event) {// 如果不在冷却期内，执行第一次点击的逻辑if (!isCoolingDown.value) {console.log('第一次点击逻辑');// 设置冷却期状态为 true，并在一定时间后重置为 falseisCoolingDown.value = true;setTimeout(() => {isCoolingDown.value = false;}, 300); // 300ms 是双击间隔时间，可以根据实际情况调整}
}function handleDoubleClick(event) {// 如果处于冷却期内，阻止默认的双击事件行为if (isCoolingDown.value) {event.preventDefault();event.stopPropagation();console.log('拦截了第一次点击，执行双击逻辑');} else {// 如果不在冷却期内，执行正常的双击逻辑console.log('执行正常的双击逻辑');}
}
</script>

在这个示例中：

• 我们使用 ref 来定义 isCoolingDown 状态变量。
• handleMouseDown 方法用于处理鼠标按下（第一次点击）事件。如果 isCoolingDown 为 false，则执行第一次点击的逻辑，并设置一个300毫秒的冷却期。
• handleDoubleClick 方法用于处理双击事件。如果 isCoolingDown 为 true，则表示第一次点击逻辑正在冷却期内，我们阻止默认的双击行为并执行自定义的双击逻辑。如果 isCoolingDown 为 false，则执行正常的双击逻辑。

这种方法可以确保在双击事件的第一次点击时执行特定的逻辑，同时在第二次点击时执行另一组逻辑或阻止默认的双击行为。

开发案例：

const isFlag = ref(false);
function handleMouseDown() {console.log('handleMouseDown');if (!isFlag.value) {console.log('第一次点击');isFlag.value = true;// console.log('isFlag.value-1', isFlag.value);setTimeout(() => {isFlag.value = false;// console.log('isFlag.value-2', isFlag.value);}, 300);}
}

function rowClick(event, field) {console.log('event', event, 'field', field);if (isFlag.value) {event.preventDefault();event.stopPropagation();console.log('拦截了第一次点击，并执行双击逻辑');} else {console.log('执行双击逻辑');}// 以下是双击的逻辑field.Selected = true;props.rowClickCB(event,Object.assign(new Cell(), { TableField: field, TableInfo: props.TableInfo }));
}

<div:class="item.Selected ? 'row' : ''"@contextmenu.prevent="fieldMenu($event, TableInfo, item)"@click="selectField(activeList, item, startNum + index)"@dblclick="rowClick($event, item)"@mousedown="handleMouseDown"style="display: flex; justify-content: space-around">

 开发案例中，到目前为止，可以成功拦截第一次点击，但是需要注意的是，需要双击的频率在合适（双击频率要在300ms内点击第二次）的情况下才会拦截第一次点击，在里面写你要的TODO逻辑即可。（如果双击频率稳定在某个范围（凭感觉），就会走到else {console.log('执行双击逻辑');}），所以双击逻辑放到 if 外面就能都走到，目的是拦截第一次点击做一些操作而已。

如果需要每次双击都拦截到第一次点击，可以调一下定时器的时间即可，可以调到500ms，一般人双击的频率都可以在500ms点击第二次。但是超过500ms之后点击第二次的话也不会拦截到第一次点击。