Ionic Gesture Events

Events Description Usage Examples
on-hold The long press duration is 500 milliseconds. 
<button 
    on-hold="onHold()" 
    class="button">
    Test
    </button>
Try it »
on-tap This is the gesture tap event. If the long press exceeds 250 milliseconds, it's no longer a tap. 
<button 
    on-tap="onTap()" 
    class="button">
    Test
    </button>
 Try it »
on-double-tap Double-tap screen event 
<button 
    on-double-tap="onDoubleTap()" 
    class="button">
    Test
    </button>
 Try it »
on-touch This is different from on-tap. It executes immediately when the user clicks, without waiting for touchend/mouseup. 
    <button on-touch="onTouch()" 
    class="button">
    Test
    </button>
 Try it »
on-release Triggered when the user ends the touch event. 
<button 
    on-release="onRelease()" 
    class="button">
    Test
</button>
 Try it »
on-drag This is somewhat similar to dragging on PC. When you keep clicking on an object and your hand starts to move, on-drag is triggered. 
<button 
    on-drag="onDrag()" 
    class="button">
    Test
</button>
 Try it »
on-drag-up Drag upward. 
<button 
    on-drag-up="onDragUp()" 
    class="button">
    Test
</button>
Try it »
on-drag-right Drag to the right. 
<button 
    on-drag-right="onDragRight()" 
    class="button">
    Test
</button>
 Try it »
on-drag-down Drag downward. 
<button 
    on-drag-down="onDragDown()" 
    class="button">
    Test
</button>
 Try it »
on-drag-left Drag to the left. 
<button 
    on-drag-left="onDragLeft()" 
    class="button">
    Test
</button>
 Try it »
on-swipe Refers to finger swipe effects, which can be in any direction. Similar to on-drag, there are separate events for the four directions. 
<button 
    on-swipe="onSwipe()" 
    class="button">
    Test
</button>
 Try it »
on-swipe-up Finger swipe upward effect. 
<button 
    on-swipe-up="onSwipeUp()" 
    class="button">
    Test
</button>
 Try it »
on-swipe-right Finger swipe to the right effect. 
<button 
    on-swipe-right="onSwipeRight()" 
    class="button">
    Test
</button>
 Try it »
on-swipe-down Finger swipe downward effect. 
<button
    on-swipe-down="onSwipeDown()"
    class="button">
    Test
</button>
 Try it »
on-swipe-left Finger swipe to the left effect. 
<button 
    on-swipe-left="onSwipeLeft()"
    class="button">
    Test
</button>
 Try it »

$ionicGesture

An Angular service that demonstrates the ionicionic.EventController gesture.

Methods

on(eventType, callback, $element)

Add an event listener to an element.

Parameters Type Details
eventType string

The gesture event to listen for.
callback function(e)

The event triggered when the gesture event occurs.
$element element

The event listened to by the Angular element.
options object

Object.

 
off(eventType, callback, $element)

Remove a gesture event listener from an element.

Parameters Type Details
eventType string

The gesture event to remove the listener for.
callback function(e)

The listener to remove.
$element element

The Angular element whose event is being listened to.
Other Extensions