---
title: "useMouse 用法與示例"
description: "跟蹤滑鼠位置。"
canonical: https://reactuse.com/zh-Hant/browser/usemouse/
---

# useMouse

跟蹤滑鼠位置。

`useMouse` 追蹤滑鼠游標在頁面上的位置，回傳頁面座標（`x`、`y`）、客戶端座標和螢幕座標。可選地傳入一個 DOM 元素的 ref 以獲取相對於該元素的座標，包括元素的尺寸和位置。此 hook 監聽 `mousemove` 事件並持續更新座標。

### 使用場景

- 建構跟隨游標的自訂游標效果或工具提示
- 實作基於游標位置的互動式視覺效果或視差效果
- 追蹤滑鼠在特定元素內的相對位置

### 注意事項

- **SSR 安全**：在伺服器端渲染時所有座標回傳 `0`。伺服器上不會附加 `mousemove` 監聽器。
- **元素相對座標**：傳入一個 DOM 元素的 ref 也可以獲取相對於該元素的座標，包括元素的尺寸和位置。
- **相關 hooks**：另請參閱 `useMousePressed` 追蹤按壓狀態，以及 `useElementByPoint` 偵測游標下的元素。

## Usage

```tsx live

function Demo() {
  const mouse = useMouse();

  return (
    <div>
      <p>
        客戶端 - x: {mouse.clientX}, y: {mouse.clientY}
      </p>
      <p>
        頁面 - x: {mouse.pageX}, y: {mouse.pageY}
      </p>
      <p>
        螢幕 - x: {mouse.screenX}, y: {mouse.screenY}
      </p>
    </div>
  );
};

```

%%API%%