useMouse

跟蹤滑鼠位置。

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>
  );
};

結果

客戶端 - x: NaN, y: NaN

頁面 - x: NaN, y: NaN

螢幕 - x: NaN, y: NaN

API

useMouse

Returns

UseMouseCursorState: 滑鼠位置

Arguments

參數名	描述	類型	預設值
target	dom元素	BasicTarget	-

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;