YouTip

Ionic Gesture Event

📅 2026-06-19 | 📂 Ionic

Ionic Gesture Events | Tutorial

Event	Description	Usage	Example
on-hold	The long press duration is 500 milliseconds.		Try it out »
on-tap	This is a tap gesture event. If the press duration exceeds 250ms, it is no longer considered a tap.		Try it out »
on-double-tap	Double tap gesture event.		Try it out »
on-touch	This differs from on-tap; it executes immediately upon user click without waiting for touchend/mouseup.		Try it out »
on-release	Triggered when the user ends a touch event.		Try it out »
on-drag	Similar to dragging on a PC. Triggers on-drag when you hold down on an element and start moving your finger.		Try it out »
on-drag-up	Drag upwards.		Try it out »
on-drag-right	Drag rightwards.		Try it out »
on-drag-down	Drag downwards.		Try it out »
on-drag-left	Drag leftwards.		Try it out »
on-swipe	Refers to finger swipe effects in any direction. Like on-drag, it also has separate events for four directions.		Try it out »
on-swipe-up	Finger swipe effect upwards.		Try it out »
on-swipe-right	Finger swipe effect rightwards.		Try it out »
on-swipe-down	Finger swipe effect downwards.	Test	Try it out »
on-swipe-left	Finger swipe effect leftwards.		Try it out »

$ionicGesture

An Angular service that exposes Ionic's EventController for gestures.

Methods

on(eventType, callback, $element)

Adds an event listener to an element.

Parameter	Type	Details
eventType	`string`	The gesture event to listen for.
callback	`function(e)`	The callback triggered when the gesture event occurs.
$element	`element`	The Angular element to attach the listener to.
options	`object`	Options object.

off(eventType, callback, $element)

Removes a gesture event listener from an element.

Parameter	Type	Details
eventType	`string`	The gesture event to remove the listener from.
callback	`function(e)`	The callback function of the listener to remove.
$element	`element`	The Angular element the listener was attached to.