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. |
Create a new GestureDetector instance.
| Name | Type | Description |
|---|---|---|
| element | Element | Name of the event. |
| options | Object | Options object. |
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.
| Name | Type | Description |
|---|---|---|
| gestures | String | A space separated list of gestures. |
| handler | Function | An event handling function. |
Remove an event listener.
| Name | Type | Description |
|---|---|---|
| gestures | String | A space separated list of gestures. |
| handler | Function | An event handling function. |
| Name | Type | Description |
|---|---|---|
| gesture | String | |
| eventData | Object |
Enable or disable gesture detection.
| Name | Type | Description |
|---|---|---|
| state | Boolean | Specify if it should be enabled or not. |
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 | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
| Name | Type | Description |
|---|---|---|
| ev | Object |
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.