---
title: "useDoubleClick 用法與示例"
description: "雙擊跟蹤。"
canonical: https://reactuse.com/zh-Hant/element/usedoubleclick/
---

# useDoubleClick

雙擊跟蹤

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

### 使用場景

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

### 注意事項

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

## Usage

```tsx live

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%%