React中如何在第二次点击鼠标释放前检测双击事件

React 没有内置符合你要求的原生事件属性。原生 onDoubleClick 对齐的是 DOM 标准的 dblclick 事件，规范本身就要求两次点击的鼠标按键全部释放后才会触发，所以没办法直接通过修改属性配置实现你要的效果。

你可以自行通过监听 onMouseDown 事件手动实现双击判定逻辑，思路如下：

• 维护一个变量存储上一次鼠标按下的时间戳
• 每次触发 onMouseDown 事件时，计算当前时间与上一次记录时间的差值
• 若差值在常规双击判定阈值（通常为300~500ms，可自行调整）范围内，即判定为双击，触发你需要的对应逻辑，同时重置时间戳避免重复触发；若超出阈值，就将当前时间更新为最新的点击时间戳

以下是简单的实现示例：

import { useRef } from 'react';

function DoubleClickDemo() {
  // 存储上一次点击的时间戳
  const lastClickTime = useRef(0);
  // 双击判定阈值，单位ms
  const DOUBLE_CLICK_THRESHOLD = 300;

  const handleMouseDown = () => {
    const currentTime = Date.now();
    if (currentTime - lastClickTime.current < DOUBLE_CLICK_THRESHOLD) {
      // 第二次按键按下时就会执行此处的双击逻辑
      console.log('双击触发（按下即生效）');
      // 触发后重置时间，避免连续点击重复判定
      lastClickTime.current = 0;
    } else {
      lastClickTime.current = currentTime;
    }
  };

  return <button onMouseDown={handleMouseDown}>点我测试双击</button>;
}

如果需要同时区分单击和双击事件，还需要额外添加定时器延迟执行单击逻辑，避免双击时同时触发单击回调。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture