上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useMouseInElement

Tags:
Sensors
Pausable

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

演示

源码
isOutside:
false
elementX:
0
elementY:
0
elementPositionX:
0
elementPositionY:
0
elementHeight:
0
elementWidth:
0

用法

请查看 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
}