useMousePressed

Tags:

一个用于跟踪鼠标按压状态的 React Hook。

演示

源码
Mouse Pressed:
false
Source Type:
null
Mouse Pressed (target):
false
Source Type (target):
null
Target

用法

请查看 API。

源码

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

API

const { pressed, sourceType } = useMousePressed(elementTarget, options)

元素目标 ElementTarget

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

更多详情,请参见 ElementTargetElementTarget 类型

选项 Options

export type MousePressedOptions = {
  /**
   * 是否监听触摸事件
   *
   * @defaultValue true
   */
  touch?: boolean
  /**
   * 是否监听拖拽事件
   *
   * @defaultValue true
   */
  drag?: boolean
  /**
   * 是否使用事件捕获
   *
   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture MDN - addEventListener#capture}
   *
   * @defaultValue false
   */
  capture?: boolean
  /**
   * 鼠标按压的初始值
   *
   * @defaultValue false
   */
  initialValue?: boolean
  /**
   * 目标元素
   *
   * @defaultValue () => window
   */
  target?: ElementTarget
}

返回值

export type UseMousePressedReturns = {
  /**
   * 鼠标是否被按压
   */
  pressed: boolean
  /**
   * 鼠标按压的来源类型
   */
  sourceType: UseMouseSourceType
}