简体中文

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
  }

ON THIS PAGE

#useMouse

#演示

#用法

#源码

#API

#选项 Options

#返回值

useMouse

演示

用法

源码

API

选项 Options

返回值