onLongPress
Category Sensors
Runs a callback when a long press occurs on a given element.
Demo
Is long press ? false Is click ? false
Usage
<script>
import { onLongPress } from '@sv-use/core';
let el = $state();
onLongPress(() => el, (event) => {
console.log('Long Press detected');
});
</script>
<button bind:this={el}>Long press</button>Type definitions
import type { CleanupFunction, MaybeGetter } from '../../__internal__/types.js';
type OnLongPressOptions = {
/**
* Whether to auto-cleanup the event listeners or not.
*
* If set to `true`, it must run in the component initialization lifecycle.
* @default true
*/
autoCleanup?: boolean;
/**
* Time in milliseconds before the `handler` gets called.
* @default 500
*/
delay?: number;
/**
* Allowance of moving distance in pixels.
*
* The action will get canceled when moving too far from the pointerdown position.
* @default 10
*/
distanceThreshold?: number;
modifiers?: OnLongPressModifiers;
/**
* The callback for when the pointer is released.
* @param duration How long the element was pressed for in milliseconds.
* @param distance The distance travelled from the pointerdown position.
* @param isLongPress Whether the action was a long press or not.
*/
onMouseUp?(duration: number, distance: number, isLongPress: boolean): void;
};
type OnLongPressModifiers = {
/**
* Whether to dispatch to the registered listener before being dispatched to any `EventTarget` beneath it in the DOM tree or not.
*
* Will be used in the event listeners' options.
* @default false
*/
capture?: boolean;
/**
* Whether the event listener should be invoked at most once after being added or not.
*
* Will be used in the event listeners' options.
* @default false
*/
once?: boolean;
/**
* Whether to call `event.preventDefault()` when an event occurs or not.
* @default false
*/
preventDefault?: boolean;
/**
* Whether the listener should only be invoked if the `event.target` is the given element or not.
*/
self?: boolean;
/**
* Whether to call `event.stopPropagation()` when an event occurs or not.
* @default false
*/
stopPropagation?: boolean;
};
/**
* Runs a callback when a long press occurs on a given element.
* @param target The element on which to attach the long press.
* @param handler The callback to execute.
* @param options Additional options to customize the behavior.
* @returns A cleanup function.
* @see https://svelte-librarian.github.io/sv-use/docs/core/sensors/on-long-press
*/
export declare function onLongPress(target: MaybeGetter<HTMLElement | null | undefined>, handler: (event: PointerEvent) => void, options?: OnLongPressOptions): CleanupFunction;
export {};