简体中文

useMouseInElement

Tags:

Sensors

Pausable

一个用于追踪鼠标在元素中位置的 React Hook。

演示

源码

isOutside:

false

elementX:

elementY:

elementPositionX:

elementPositionY:

elementHeight:

elementWidth:

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const { isOutside, elementX, elementY, ...rest } = useMouseInElement(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

选项 Options

export type MouseInElementOptions = UseMouseOptions & { handleOutside?: boolean }

返回值

Retuerns contain Pausable instance that can be paused, resumed.

See Pausable for more details.

export type UseMouseInElementReturns = Pausable & {
  /**
   * 鼠标是否在元素之外
   */
  isOutside: boolean
  /**
   * 鼠标相对于元素的 x 位置
   */
  elementX: number
  /**
   * 鼠标相对于元素的 y 位置
   */
  elementY: number
  /**
   * 元素的 x 位置
   */
  elementPositionX: number
  /**
   * 元素的 y 位置
   */
  elementPositionY: number
  /**
   * 元素的高度
   */
  elementHeight: number
  /**
   * 元素的宽度
   */
  elementWidth: number
  /**
   * 鼠标状态
   */
  stop(): void
  /**
   * 鼠标状态
   */
  mouse: UseMouseReturns
}

ON THIS PAGE

#useMouseInElement

#演示

#用法

#源码

#API

#元素目标 ElementTarget

#选项 Options

#返回值

useMouseInElement

演示

用法

源码

API

元素目标 ElementTarget

选项 Options

返回值