useDoubleClick

双击跟踪

useDoubleClick 让你区分 DOM 元素上的单击和双击交互。它使用可配置的延迟来确定一次点击是单击还是双击序列的第一次点击。传入目标 ref 并提供单独的 onSingleClick 和 onDoubleClick 处理器来响应各个交互。

使用场景

• 在列表项或表格单元格上实现”单击选择，双击编辑”模式
• 在图片或地图上添加双击缩放，同时保留单击用于其他操作
• 任何需要在同一元素上单击和双击触发不同行为的 UI

注意事项

• 延迟：单击和双击检测之间的默认延迟可通过 latency 选项（毫秒）自定义。较短的延迟使单击感觉更快，但可能会错过较慢的双击。
• 事件类型：支持鼠标和触摸事件，适用于桌面和移动端。
• 清理：组件卸载时所有事件监听器会自动移除。

Usage

function Demo() {
  const element = useRef<HTMLButtonElement>(null);
  const [text, setText] = useState("未点击");

  useDoubleClick({
    target: element,
    onSingleClick: () => {
      setText("单击");
    },
    onDoubleClick: () => {
      setText("双击");
    },
  });
  return (
    <div>
      <button ref={element}>点击我</button>
      <p>{text}</p>
    </div>
  );
};

API

useDoubleClick

Returns

void

Arguments

UseDoubleClickProps

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;