---
title: "useLongPress 用法與示例"
description: "useLongPress 是一個 React hook，可在任何元素上偵測長按手勢，同時支援滑鼠與觸控，並在按住達到可設定的延遲後觸發回呼。"
canonical: https://reactuse.com/zh-Hant/browser/uselongpress/
---

# useLongPress

跟蹤長按的 React Hook

`useLongPress` 偵測元素上的長按手勢，在使用者按住指定時間後觸發回呼。它回傳可以展開到目標元素上的事件處理器屬性。此 hook 同時處理滑鼠和觸控事件，提供可設定的延遲和移動容差選項。

### 使用場景

- 在行動裝置上長按時顯示上下文選單或工具提示
- 實作按住以確認的操作模式（例如刪除確認）
- 建構需要使用者持續按壓的互動式遊戲或控制元素

### 注意事項

- **SSR 安全**：在伺服器端渲染時回傳空操作事件處理器。伺服器上不會存取 `window` 或 `document`。
- **觸控和滑鼠**：同時處理兩種指標類型。`isPreventDefault` 選項（預設：`true`）可防止按壓期間的文字選取和右鍵選單。
- **可自訂延遲**：設定 `delay` 選項（毫秒）以控制使用者必須按住多長時間才觸發回呼。

## Usage

```tsx live

function Demo() {
  const [state, setState] = useState("未按下");
  const onLongPress = () => {
    setState("長按了！");
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300,
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return (
    <div>
      <button {...longPressEvent}>useLongPress</button>
      <button onClick={() => setState("未按下")}>重置</button>
      <div>按下狀態：{state}</div>
    </div>
  );
};

```

%%API%%