How to detect long (3 sec) touch event in Ionic?

Hi, I’d like to detect when a user is holding a button for 3 seconds in Ionic app.
I found the on-hold event in Ionic doc but it’s 500ms and does not seem to be customizable.

Any idea? Thanks.

1 Like

You can listen for the on-hold event, and then listen for the on-release event. You can compare the time of both events to determine how long the hold happened. Something like this might do it.

Button

<button class="button" on-hold="hold($event)" on-release="release($event)">My Button</button>

Controller

var didUserHoldForThreeSeconds = 0;
$scope.hold = function(event) {
  didUserHoldForThreeSeconds = event.timestamp;
};
$scope.release = function (event) {
  if (event.timestamp - didUserHoldForThreeSeconds > 3000) {
    console.log('Hooray! They held for 3 seconds')
  }
  didUserHoldForThreeSeconds = 0; // reset after each release
};
3 Likes

Alternatively, you could work with the lower level Ionic gestures services and register your own gestures. If you were needing to do this a lot, that would be the way to go.

Oh thanks for the clever idea! I’ll try it and tell you:)

Is there some way to detect double-click event in Ionic? I need to open a Modal only when the button is double-clicked.

Yes there is a double tap gesture which is not exposed as a directive. You’ll have to register an event listener yourself.

The $ionicGesture angular service is just a friendly interface for the ionic event controller. The event controller has an onGesture method that lists all of the possible gestures you can listen for.

$ionicGesture.$on('doubletap', function () { 
  // Do something here on double tap or double click
}, angular.element(element));
1 Like

This works but only if you get the element by ID.

I tried with class and tagname and did not worked.