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 }