ons.GestureDetector

Utility class for gesture detection.

Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons.GestureDetector').defaults.

Name Description
defaults
DOCUMENT
HAS_POINTEREVENTS
HAS_TOUCHEVENTS
IS_MOBILE
NO_MOUSEEVENTS
CALCULATE_INTERVAL
EVENT_TYPES
DIRECTION_DOWN|LEFT|UP|RIGHT
POINTER_MOUSE|TOUCH|PEN
EVENT_START|MOVE|END|RELEASE|TOUCH
READY
plugins
gestures
prevent_mouseevents
started
should_detect
pointers
element
enabled
options
eventStartHandler
eventHandlers
dragMinDistance
dragDistanceCorrection
dragMaxTouches
dragBlockHorizontal
dragBlockVertical
dragLockToAxis
dragLockMinDistance
holdTimeout
holdThreshold
swipeMinTouches
swipeMaxTouches
swipeVelocityX
swipeVelocityY
tapMaxTime
tapMaxDistance
tapAlways
doubleTapDistance
doubleTapInterval
preventDefault
preventMouse
transformMinScale
transformMinRotation

These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons.GestureDetector').someMethod().

Signature Description
constructor(element[, options]) Create a new GestureDetector instance.
on(gestures, handler) Adds an event handler for a gesture. Available gestures are: drag, dragleft, dragright, dragup, dragdown, hold, release, swipe, swipeleft, swiperight, swipeup, swipedown, tap, doubletap, touch, transform, pinch, pinchin, pinchout and rotate.
off(gestures, handler) Remove an event listener.
trigger(gesture, eventData)
enable(state) Enable or disable gesture detection.
dispose() Remove and destroy all event handlers for this instance.
constructor(element[, options]): ons.GestureDetector.Instance

Create a new GestureDetector instance.

Parameters
Name Type Description
element Element Name of the event.
options Object Options object.
on(gestures, handler)

Adds an event handler for a gesture. Available gestures are: drag, dragleft, dragright, dragup, dragdown, hold, release, swipe, swipeleft, swiperight, swipeup, swipedown, tap, doubletap, touch, transform, pinch, pinchin, pinchout and rotate.

Parameters
Name Type Description
gestures String A space separated list of gestures.
handler Function An event handling function.
off(gestures, handler)

Remove an event listener.

Parameters
Name Type Description
gestures String A space separated list of gestures.
handler Function An event handling function.
trigger(gesture, eventData)

Parameters
Name Type Description
gesture String
eventData Object
enable(state)

Enable or disable gesture detection.

Parameters
Name Type Description
state Boolean Specify if it should be enabled or not.
dispose()

Remove and destroy all event handlers for this instance.

To use these events, add event listeners to the elements as you would for native events, like click. For example: document.querySelector('ons.GestureDetector').addEventListener('drag', function() { ... }).

Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).

Name Description
drag
dragstart
dragend
drapleft
dragright
dragup
dragdown
gesture
hold
release
swipe
swipeleft
swiperight
swipeup
swipedown
tap
doubletap
touch
transform
transformstart
transformend
pinchin
pinchout
rotate
drag

Parameters
Name Type Description
ev Object
dragstart

Parameters
Name Type Description
ev Object
dragend

Parameters
Name Type Description
ev Object
drapleft

Parameters
Name Type Description
ev Object
dragright

Parameters
Name Type Description
ev Object
dragup

Parameters
Name Type Description
ev Object
dragdown

Parameters
Name Type Description
ev Object
gesture

Parameters
Name Type Description
ev Object
hold

Parameters
Name Type Description
ev Object
release

Parameters
Name Type Description
ev Object
swipe

Parameters
Name Type Description
ev Object
swipeleft

Parameters
Name Type Description
ev Object
swiperight

Parameters
Name Type Description
ev Object
swipeup

Parameters
Name Type Description
ev Object
swipedown

Parameters
Name Type Description
ev Object
tap

Parameters
Name Type Description
ev Object
doubletap

Parameters
Name Type Description
ev Object
touch

Parameters
Name Type Description
ev Object
transform

Parameters
Name Type Description
ev Object
transformstart

Parameters
Name Type Description
ev Object
transformend

Parameters
Name Type Description
ev Object
pinchin

Parameters
Name Type Description
ev Object
pinchout

Parameters
Name Type Description
ev Object
rotate

Parameters
Name Type Description
ev Object

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.