---
title: "useMousePressed 用法與示例"
description: "跟蹤滑鼠按下狀態。"
canonical: https://reactuse.com/zh-Hant/browser/usemousepressed/
---

# useMousePressed

跟蹤滑鼠按下狀態

`useMousePressed` 追蹤滑鼠或觸控按壓狀態，回傳一個布林值指示使用者是否正在按壓，以及輸入來源類型（滑鼠、觸控或拖曳）。可選地傳入一個目標元素的 ref 以限定追蹤範圍。此 hook 處理滑鼠按鈕、觸控開始/結束和拖曳事件。

### 使用場景

- 建構在按壓期間改變外觀的互動式元素（例如按鈕按壓效果）
- 實作需要追蹤按壓/釋放狀態的繪圖或塗鴉功能
- 區分不同的輸入來源（滑鼠、觸控、拖曳）以提供差異化回饋

### 注意事項

- **SSR 安全**：在伺服器端渲染時，按壓狀態回傳 `false`，來源類型回傳 `null`。伺服器上不會附加事件監聽器。
- **輸入來源**：預設追蹤滑鼠、觸控和拖曳事件。可透過 `touch` 和 `drag` 選項停用觸控或拖曳追蹤。
- **相關 hooks**：另請參閱 `useMouse` 追蹤游標位置，以及 `useLongPress` 偵測長按手勢。

## Usage

```tsx live

function Demo() {
  const [mouse, type] = useMousePressed();

  return (
    <div>
      <p>按下狀態：{JSON.stringify(mouse)}</p>
      <p>來源類型：{JSON.stringify(type)}</p>
    </div>
  );
};

```

%%API%%