May 22, 2021 ionic
| Event | Describe | Usage | Instance |
|---|---|---|---|
| on-hold | The time to press is 500 milliseconds. |
<button on-hold="onHold()" class="button"> Test </button> |
Try it out . . . |
| on-tap | This is a gesture tap event, and if you press for more than 250 milliseconds, it's not a tap. |
<button on-tap="onTap()" class="button"> Test </button> |
Try it out . . . |
| on-double-tap | Double-click the screen event with your hand |
<button on-double-tap="onDoubleTap()" class="button"> Test </button> |
Try it out . . . |
| on-touch | This is still different from on-tap, this is executed immediately, and the user clicks to execute immediately. Don't wait for touchend/mouseup. |
<button on-touch="onTouch()" class="button"> Test </button> |
Try it out . . . |
| on-release | Triggered when the user ends the touch event. |
<button on-release="onRelease()" class="button"> Test </button> |
Try it out . . . |
| on-drag | This is a bit like a drag on the PC side. When you keep clicking on an object and your hand starts moving, it triggers on-drag. |
<button on-drag="onDrag()" class="button"> Test </button> |
Try it out . . . |
| on-drag-up | Drag up. |
<button on-drag-up="onDragUp()" class="button"> Test </button> |
Try it out . . . |
| on-drag-right | Drag to the right. |
<button on-drag-right="onDragRight()" class="button"> Test </button> |
Try it out . . . |
| on-drag-down | Drag down. |
<button on-drag-down="onDragDown()" class="button"> Test </button> |
Try it out . . . |
| on-drag-left | Drag to the left. |
<button on-drag-left="onDragLeft()" class="button"> Test </button> |
Try it out . . . |
| on-swipe | Refers to the finger swipe effect, which can be in any direction. And similar to on-drag, there are separate events in four directions. |
<button on-swipe="onSwipe()" class="button"> Test </button> |
Try it out . . . |
| on-swipe-up | Slide the effect up your finger. |
<button on-swipe-up="onSwipeUp()" class="button"> Test </button> |
Try it out . . . |
| on-swipe-right | Swipe the effect on your right finger. |
<button on-swipe-right="onSwipeRight()" class="button"> Test </button> |
Try it out . . . |
| on-swipe-down | Slide the effect down your finger. |
<button on-swipe-down="onSwipeDown()" class="button"> Test </button> |
Try it out . . . |
| on-swipe-left | Swipe the effect on the left finger. |
<button on-swipe-left="onSwipeLeft()" class="button"> Test </button> |
Try it out . . . |
An angular service showcases ionicionic. EventController gestures.
on(eventType, callback, $element)
Add an event listener to an element.
| Parameters | Type | Details |
|---|---|---|
| eventType |
string
|
Listen for gesture events. |
| callback |
function(e)
|
The event that is triggered when the gesture event occurs. |
| $element |
element
|
The event that the angular element listens to. |
| options |
object
|
Object. |
off(eventType, callback, $element)
Remove a gesture event listener from an element.
| Parameters | Type | Details |
|---|---|---|
| eventType |
string
|
Remove the listening gesture event. |
| callback |
function(e)
|
Remove the listener. |
| $element |
element
|
The angular element of the monitored event. |