useLongPress
一个 React 钩子(Hook),用于处理长按事件。
演示
用法
请查看 API。
源码
API
const lp = useLongPress(elementTarget, handler, options)
元素目标 ElementTarget
ElementTarget
是一个联合类型,代表可以被定位的各种元素。
更多详情,请参见 ElementTarget 或 ElementTarget 类型。
处理函数 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
}