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

useMouse

Tags:
Sensors
Pausable

用于跟踪鼠标位置的 React Hook。

演示

尝试滚动页面或移动您的鼠标来观察不同类型之间的差异。

源码
Type: page (default):
(0, 0, null)
Type: client:
(0, 0, null)
Type: screen:
(0, 0, null)
Type: movement (useful when pointer locked):
(0, 0)
isActive:
true

用法

请查看 API。

源码

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

🪝 Hook🎨 Demo📄 Document

API

const { x, y, position, sourceType, stop } = useMouse(options)

选项 Options

export type UseMouseOptions = {
  /**
   * 用于从事件中提取的坐标类型。
   *
   * @defaultValue 'page'
   */
  type?: UseMouseCoordType | UseMouseEventExtractor
  /**
   * 目标元素以便附加事件监听器。
   *
   * @defaultValue window
   */
  target?: Window | EventTarget | null | undefined
  /**
   * 是否启用触摸事件。
   *
   * @defaultValue true
   */
  touch?: boolean
  /**
   * 是否启用滚动事件。
   *
   * @defaultValue true
   */
  scroll?: boolean
  /**
   * 触摸结束时是否重置位置。
   *
   * @defaultValue false
   */
  resetOnTouchEnds?: boolean
  /**
   * 初始位置。
   *
   * @defaultValue { x: 0, y: 0 }
   */
  initialValue?: Position
  /**
   * 是否立即开始更新位置。
   *
   * @defaultValue false
   */
  immediate?: boolean
}

返回值

返回值中包含可暂停、恢复的 Pausable 实例。

更多详情，请参见 Pausable。

export type Position = {
  /**
   * X 坐标
   */
  x: number
  /**
   * Y 坐标
   */
  y: number
}

export type UseMouseReturns = Position &
  Pausable & {
    /**
     * 鼠标事件的位置。
     */
    position: Position
    /**
     * 事件的来源类型。
     */
    sourceType: UseMouseSourceType
    /**
     * 立即停止鼠标事件监听器。
     */
    stop(): void
  }