The best ionic gesture events Tutorial In 2024, In this tutorial you can learn $ IonicGesture,
event | description | usage | Examples |
---|---|---|---|
on-hold | Long press time is 500 milliseconds. | <button on-hold="onHold()" class="button"> Test </button> | |
on-tap | This is a gesture Tap the event, if you long press for more than 250 ms, it is not a tap. . | <button on-tap="onTap()" class="button"> Test </button> | |
on-double-tap | Hand tap the screen event | <button on-double-tap="onDoubleTap()" class="button"> Test </button> | |
on-touch | The on-tap and there are differences, this is executed immediately, but the user clicks immediately executed. Without waiting touchend / mouseup. | <button on-touch="onTouch()" class="button"> Test </button> | |
on-release | Fires when the user end of the touch event. | <button on-release="onRelease()" class="button"> Test </button> | |
on-drag | This is somewhat similar to the PC side of the drag. When you click on an object has been, and began to move the hand will trigger on-drag. | <button on-drag="onDrag()" class="button"> Test </button> | |
on-drag-up | Drag upward. | <button on-drag-up="onDragUp()" class="button"> Test </button> | |
on-drag-right | Drag to the right. | <button on-drag-right="onDragRight()" class="button"> Test </button> | |
on-drag-down | Drag down. | <button on-drag-down="onDragDown()" class="button"> Test </button> | |
on-drag-left | Drag to the left. | <button on-drag-left="onDragLeft()" class="button"> Test </button> | |
on-swipe | Refers to the finger sliding effect, it may be any direction. But also, and on-drag Similarly, there is a separate event in four directions. | <button on-swipe="onSwipe()" class="button"> Test </button> | |
on-swipe-up | Up fingers sliding effect. | <button on-swipe-up="onSwipeUp()" class="button"> Test </button> | |
on-swipe-right | Right finger sliding effect. | <button on-swipe-right="onSwipeRight()" class="button"> Test </button> | |
on-swipe-down | Down finger sliding effect. | <button on-swipe-down="onSwipeDown()" class="button"> Test </button> | |
on-swipe-left | Left fingers sliding effect. | <button on-swipe-left="onSwipeLeft()" class="button"> Test </button> |
A service display ionicionic.EventController angular gestures.
on(eventType, callback, $element)
Add an event listener on an element.
parameter | Types of | Detail |
---|---|---|
eventType | string | Listening gesture event. |
callback | function(e) | When the gesture event trigger events. |
$ Element | element | angular elements of listening events. |
options | object | Object. |
off(eventType, callback, $element)
Remove a gesture event listener on an element.
parameter | Types of | Detail |
---|---|---|
eventType | string | Remove listening gesture event. |
callback | function(e) | Remove the listener. |
$ Element | element | It is monitored events angular elements. |