useDoubleClick

雙擊跟蹤

useDoubleClick 區分單擊和雙擊事件，分別觸發不同的回呼。它使用可設定的延遲來確定點擊是單擊還是雙擊的一部分。回傳一個可直接展開到目標元素的點擊處理器。

使用場景

• 為同一個元素同時處理單擊和雙擊行為（例如單擊選取、雙擊編輯）
• 建構需要區分單擊和雙擊的檔案管理器或列表介面
• 實作精確的點擊互動控制

注意事項

• 延遲：單擊回呼會在雙擊偵測延遲後才觸發。調整 latency 選項以平衡回應速度和雙擊偵測準確性。
• 觸控裝置：在觸控裝置上也能正常工作，但部分瀏覽器可能有原生的雙擊縮放行為。
• 相關 hooks：另請參閱 useLongPress 用於偵測長按手勢。

Usage

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

  useDoubleClick({
    target: element,
    onSingleClick: () => {
      setText("single click");
    },
    onDoubleClick: () => {
      setText("double click");
    },
  });
  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;