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，并在一定时间后重置为 false
    isCoolingDown.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之后点击第二次的话也不会拦截到第一次点击。

 

原文地址：https://blog.csdn.net/weixin_48420104/article/details/142845682

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！