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

**URL:** <https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069>\
**Category:** ionic-v1\
**Created:** [January 4, 2015, 4:53pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069 "2015-01-04T16:53:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![walt](https://avatars.discourse-cdn.com/v4/letter/w/71e660/32.png) [@walt](https://forum.ionicframework.com/u/walt)\
**Post date:** [January 4, 2015, 4:53pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/1 "2015-01-04T16:53:55Z")

</div>

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](http://ionicframework.com/docs/api/directive/onHold/) but it’s 500ms and does not seem to be customizable.

Any idea? Thanks.

---

<div class="post-metadata">

**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\
**Post date:** [January 5, 2015, 5:26am UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/2 "2015-01-05T05:26:20Z")

</div>

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
};
```

---

<div class="post-metadata">

**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\
**Post date:** [January 5, 2015, 5:27am UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/3 "2015-01-05T05:27:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![walt](https://avatars.discourse-cdn.com/v4/letter/w/71e660/32.png) [@walt](https://forum.ionicframework.com/u/walt)\
**Post date:** [January 5, 2015, 1:33pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/4 "2015-01-05T13:33:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 5, 2015, 3:16pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/5 "2015-01-05T15:16:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\
**Post date:** [January 5, 2015, 3:37pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/6 "2015-01-05T15:37:45Z")

</div>

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](http://ionicframework.com/docs/api/service/%24ionicGesture/) angular service is just a friendly interface for the ionic [event controller](http://ionicframework.com/docs/api/utility/ionic.EventController/). 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));

```

---

<div class="post-metadata">

**Author:** ![poliveira](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@poliveira](https://forum.ionicframework.com/u/poliveira)\
**Post date:** [February 3, 2016, 2:26pm UTC](https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/7 "2016-02-03T14:26:16Z")

</div>

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

I tried with class and tagname and did not worked.