useLongPress

Tags:

一个 React 钩子(Hook),用于处理长按事件。

演示

源码
Long press times:
0
Long press here 😭

用法

请查看 API。

源码

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

API

const lp = useLongPress(elementTarget, handler, options)

元素目标 ElementTarget

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

更多详情,请参见 ElementTargetElementTarget 类型

处理函数 Handler

export type UseLongPressHandler = (evt: PointerEvent) => void

选项 Options

export type UseLongPressModifiers = {
  /**
   * 是否阻止事件的默认行为
   */
  preventDefault?: boolean
  /**
   * 是否停止事件的传播
   */
  stopPropagation?: boolean
  /**
   * 是否只触发一次事件
   */
  once?: boolean
  /**
   * 是否捕获事件
   */
  capture?: boolean
  /**
   * 是否只在目标元素本身上触发事件
   */
  self?: boolean
}

export interface UseLongPressOptions {
  /**
   * 触发 `longpress` 前的时间(毫秒)
   *
   * @defaultValue 500
   */
  delay?: number
  /**
   * 事件修饰符
   */
  modifiers?: UseLongPressModifiers
  /**
   * 允许的移动距离(像素),从 pointerdown 位置移动太远时将取消操作。
   *
   * @defaultValue 10
   */
  distanceThreshold?: number | false
}

返回值

export type UseLongPressReturns = {
  /**
   * 元素是否被按下
   */
  isPressed: boolean
  /**
   * 元素是否被长按
   */
  isLongPressed: boolean
  /**
   * 元素是否满足阈值
   */
  isMeetThreshold: boolean
  /**
   * 停止长按事件
   */
  stop(): void
}