useMouse

跟蹤滑鼠位置。

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

使用場景

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

注意事項

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

Usage

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

useMouse

Returns

UseMouseCursorState: 滑鼠位置

Arguments

UseMouseCursorState

Type

export interface UseMouseCursorState { screenX: number screenY: number clientX: number clientY: number pageX: number pageY: number elementX: number elementY: number elementH: number elementW: number elementPosX: number elementPosY: number }

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;