useLongPress
Listen for the long press event of the target element.
Examples
Basic usage
counter:0
Default usage
Please keep pressing button to show effects.
Listen for click and long press events at the same time
pressCounter:0
clickCounter:0
Move threshold
counter:0
Basic usage
After the movement threshold is exceeded, the long press event will not be triggered
API
useLongPress( onLongPress: (event: MouseEvent | TouchEvent) => void, target: Target, options?: { delay?: number; moveThreshold?: { x?: number; y?: number }; onClick?: (event: MouseEvent | TouchEvent) => void; onLongPressEnd?: (event: MouseEvent | TouchEvent) => void; });
useLongPress( onLongPress: (event: MouseEvent | TouchEvent) => void, target: Target, options?: { delay?: number; moveThreshold?: { x?: number; y?: number }; onClick?: (event: MouseEvent | TouchEvent) => void; onLongPressEnd?: (event: MouseEvent | TouchEvent) => void; });
Params
| Property | Description | Type | Default |
|---|---|---|---|
| onLongPress | Trigger function | (event: MouseEvent | TouchEvent) => void | - |
| target | DOM node | Element | () => Element | - |
| options | Optional configuration items | Options | - |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| delay | Long press time | number | 300 |
| moveThreshold | Move threshold after press. If exceeded, the long press function won't be triggered | { x?: number; y?: number } | - |
| onClick | Click event | (event: MouseEvent | TouchEvent) => void | - |
| onLongPressEnd | Long press end event | (event: MouseEvent | TouchEvent) => void | - |
Remark
Please refer to: https://stackoverflow.com/a/11237968 to disable the ability to long press to select text on the phone