1---
2category: Sensors
3---
4 
5# onLongPress
6 
7Listen for a long press on an element. Returns a stop function.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { onLongPress } from '@vueuse/core'
14import { shallowRef, useTemplateRef } from 'vue'
15 
16const htmlRefHook = useTemplateRef('htmlRefHook')
17const longPressedHook = shallowRef(false)
18 
19function onLongPressCallbackHook(e: PointerEvent) {
20  longPressedHook.value = true
21}
22function resetHook() {
23  longPressedHook.value = false
24}
25 
26onLongPress(
27  htmlRefHook,
28  onLongPressCallbackHook,
29  {
30    modifiers: {
31      prevent: true
32    }
33  }
34)
35</script>
36 
37<template>
38  <p>Long Pressed: {{ longPressedHook }}</p>
39 
40  <button ref="htmlRefHook" class="ml-2 button small">
41    Press long
42  </button>
43 
44  <button class="ml-2 button small" @click="resetHook">
45    Reset
46  </button>
47</template>
48```
49 
50### Custom Delay
51 
52By default, the handler fires after 500ms. You can customize this with the `delay` option. It can be a number or a function that receives the `PointerEvent`.
53 
54```ts
55import { onLongPress } from '@vueuse/core'
56 
57// Fixed delay
58onLongPress(target, handler, { delay: 1000 })
59 
60// Dynamic delay based on event
61onLongPress(target, handler, {
62  delay: ev => ev.pointerType === 'touch' ? 800 : 500,
63})
64```
65 
66### Distance Threshold
67 
68The long press will be canceled if the pointer moves more than the threshold (default: 10 pixels). Set to `false` to disable movement detection.
69 
70```ts
71import { onLongPress } from '@vueuse/core'
72 
73// Custom threshold
74onLongPress(target, handler, { distanceThreshold: 20 })
75 
76// Disable movement detection
77onLongPress(target, handler, { distanceThreshold: false })
78```
79 
80### On Mouse Up Callback
81 
82You can provide an `onMouseUp` callback to be notified when the pointer is released.
83 
84```ts
85import { onLongPress } from '@vueuse/core'
86 
87onLongPress(target, handler, {
88  onMouseUp(duration, distance, isLongPress) {
89    console.log(`Held for ${duration}ms, moved ${distance}px, long press: ${isLongPress}`)
90  },
91})
92```
93 
94### Modifiers
95 
96The following modifiers are available:
97 
98| Modifier  | Description                                  |
99| --------- | -------------------------------------------- |
100| `stop`    | Calls `event.stopPropagation()`              |
101| `once`    | Removes event listener after first trigger   |
102| `prevent` | Calls `event.preventDefault()`               |
103| `capture` | Uses capture mode for event listener         |
104| `self`    | Only trigger if target is the element itself |
105 
106```ts
107onLongPress(target, handler, {
108  modifiers: {
109    prevent: true,
110    stop: true,
111  },
112})
113```
114 
115## Component Usage
116 
117```vue
118<script setup lang="ts">
119import { OnLongPress } from '@vueuse/components'
120import { shallowRef } from 'vue'
121 
122const longPressedComponent = shallowRef(false)
123 
124function onLongPressCallbackComponent(e: PointerEvent) {
125  longPressedComponent.value = true
126}
127function resetComponent() {
128  longPressedComponent.value = false
129}
130</script>
131 
132<template>
133  <p>Long Pressed: {{ longPressedComponent }}</p>
134 
135  <OnLongPress
136    as="button"
137    class="ml-2 button small"
138    @trigger="onLongPressCallbackComponent"
139  >
140    Press long
141  </OnLongPress>
142 
143  <button class="ml-2 button small" @click="resetComponent">
144    Reset
145  </button>
146</template>
147```
148 
149## Directive Usage
150 
151```vue
152<script setup lang="ts">
153import { vOnLongPress } from '@vueuse/components'
154import { shallowRef } from 'vue'
155 
156const longPressedDirective = shallowRef(false)
157 
158function onLongPressCallbackDirective(e: PointerEvent) {
159  longPressedDirective.value = true
160}
161function resetDirective() {
162  longPressedDirective.value = false
163}
164</script>
165 
166<template>
167  <p>Long Pressed: {{ longPressedDirective }}</p>
168 
169  <button
170    v-on-long-press.prevent="onLongPressCallbackDirective"
171    class="ml-2 button small"
172  >
173    Press long
174  </button>
175 
176  <button
177    v-on-long-press="[onLongPressCallbackDirective, { delay: 1000, modifiers: { stop: true } }]"
178    class="ml-2 button small"
179  >
180    Press long (with options)
181  </button>
182 
183  <button class="ml-2 button small" @click="resetDirective">
184    Reset
185  </button>
186</template>
187```
188 
189## Type Declarations
190 
191```ts
192export interface OnLongPressOptions {
193  /**
194   * Time in ms till `longpress` gets called
195   *
196   * @default 500
197   */
198  delay?: number | ((ev: PointerEvent) => number)
199  modifiers?: OnLongPressModifiers
200  /**
201   * Allowance of moving distance in pixels,
202   * The action will get canceled When moving too far from the pointerdown position.
203   * @default 10
204   */
205  distanceThreshold?: number | false
206  /**
207   * Function called when the ref element is released.
208   * @param duration how long the element was pressed in ms
209   * @param distance distance from the pointerdown position
210   * @param isLongPress whether the action was a long press or not
211   */
212  onMouseUp?: (duration: number, distance: number, isLongPress: boolean) => void
213}
214export interface OnLongPressModifiers {
215  stop?: boolean
216  once?: boolean
217  prevent?: boolean
218  capture?: boolean
219  self?: boolean
220}
221export type OnLongPressReturn = () => void
222/** @deprecated use {@link OnLongPressReturn} instead */
223export type UseOnLongPressReturn = OnLongPressReturn
224export declare function onLongPress(
225  target: MaybeElementRef,
226  handler: (evt: PointerEvent) => void,
227  options?: OnLongPressOptions,
228): OnLongPressReturn
229```
230