GestureWatcher listens for user gestures resulting from wheel, pointer, touch or key input events.

It supports scroll, zoom or drag type gestures.

It manages registered callbacks globally and reuses event listeners for more efficient performance.

Methods

Properties

noTrackGesture: (element: Element, handler?: null | OnGestureHandler) => void

Removes a previously added handler for trackGesture.

offGesture: (target: EventTarget, handler: OnGestureHandler) => void

Removes a previously added handler.

onGesture: (
    target: EventTarget,
    handler: OnGestureHandler,
    options?: OnGestureOptions,
) => Promise<void>

Call the given handler whenever the user performs a gesture on the target matching the given options.

IMPORTANT: The same handler can not be added multiple times for the same event target, even if the options differ. If the handler has already been added for this target, either using onGesture or trackGesture, then it will be removed and re-added with the current options.

LisnUsageError If the options are invalid.

trackGesture: (
    element: Element,
    handler?: null | OnGestureHandler,
    options?: OnGestureOptions,
) => Promise<void>

This is the same as onGesture except that if handler is not given, then it defaults to an internal handler that updates a set of CSS variables on the target's style:

  • --lisn-js--<Intent>-delta-x
  • --lisn-js--<Intent>-delta-y
  • --lisn-js--<Intent>-delta-z

where and <Intent> is one of GestureIntent and the delta X, Y and Z are the total summed up deltaX, deltaY and deltaZ since the callback was added, summed over all devices used (key, touch, etc).

IMPORTANT: The same handler can not be added multiple times for the same target, even if the options differ. If the handler has already been added for this target, either using trackGesture or using onGesture, then it will be removed and re-added with the current options.

LisnUsageError If the options are invalid.