# Touch events

**URL:** <https://forum.ionicframework.com/t/touch-events/3883>\
**Category:** uncategorized\
**Created:** [May 7, 2014, 3:39pm UTC](https://forum.ionicframework.com/t/touch-events/3883 "2014-05-07T15:39:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![thechrisroberts](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@thechrisroberts](https://forum.ionicframework.com/u/thechrisroberts)\
**Post date:** [May 7, 2014, 3:39pm UTC](https://forum.ionicframework.com/t/touch-events/3883/1 "2014-05-07T15:39:28Z")

</div>

How does Ionic handle touch events and how to we bind to swipes and such? I’ve seen in various places that Ionic comes bundled with a modified version of Hammer.js - how do we make use of it?

---

<div class="post-metadata">

**Author:** ![mquadrat](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@mquadrat](https://forum.ionicframework.com/u/mquadrat)\
**Post date:** [May 7, 2014, 3:44pm UTC](https://forum.ionicframework.com/t/touch-events/3883/2 "2014-05-07T15:44:58Z")

</div>

You can try these docs:

[EventController docs](http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture) or [Ionic Blog](http://ionicframework.com/blog/ionic-swipeable-cards/)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 7, 2014, 3:52pm UTC](https://forum.ionicframework.com/t/touch-events/3883/3 "2014-05-07T15:52:46Z")

</div>

Also, check out this codepen, it shows how to set up custom touch events.

> **[Ionic : Gesture Detection](https://codepen.io/calendee/pen/fbEsw)**
>
> ...

---

<div class="post-metadata">

**Author:** ![thechrisroberts](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@thechrisroberts](https://forum.ionicframework.com/u/thechrisroberts)\
**Post date:** [May 7, 2014, 3:56pm UTC](https://forum.ionicframework.com/t/touch-events/3883/4 "2014-05-07T15:56:28Z")

</div>

All helpful info. Thanks, @mquadrat and @mhartington.

---

<div class="post-metadata">

**Author:** ![thechrisroberts](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@thechrisroberts](https://forum.ionicframework.com/u/thechrisroberts)\
**Post date:** [May 7, 2014, 4:10pm UTC](https://forum.ionicframework.com/t/touch-events/3883/5 "2014-05-07T16:10:58Z")

</div>

Follow-up question: I’m not able to get it to respond to anything but click. Any particular reason why tap/touch won’t work but click will?

```
ionic.onGesture('tap', function(e) {
	// ...
}, marker);
```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 7, 2014, 4:16pm UTC](https://forum.ionicframework.com/t/touch-events/3883/6 "2014-05-07T16:16:45Z")

</div>

Try this format,

```
$ionicGesture.on('tap', function(e) {

}, break);
```

---

<div class="post-metadata">

**Author:** ![thechrisroberts](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@thechrisroberts](https://forum.ionicframework.com/u/thechrisroberts)\
**Post date:** [May 7, 2014, 4:32pm UTC](https://forum.ionicframework.com/t/touch-events/3883/7 "2014-05-07T16:32:12Z")

</div>

I’d tried that, but it’s throwing an error:

TypeError: Cannot read property ‘addEventListener’ of undefined

$ionicGesture is in scope, the element I’m targeting exists (sort of), using ionic.on works (but only with click), so I’m not sure what’s happening.

My use case here is a little differentish. I have a Mapbox map in my view and I’m trying to target the markers with touch events. Just binding a click without going through the event library works, but is very inconsistent. I’m hoping the event library can smooth it out.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 7, 2014, 4:34pm UTC](https://forum.ionicframework.com/t/touch-events/3883/8 "2014-05-07T16:34:30Z")

</div>

mind throwing it in a code pen? I can take look at it

---

<div class="post-metadata">

**Author:** ![thechrisroberts](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@thechrisroberts](https://forum.ionicframework.com/u/thechrisroberts)\
**Post date:** [May 7, 2014, 4:50pm UTC](https://forum.ionicframework.com/t/touch-events/3883/9 "2014-05-07T16:50:21Z")

</div>

What I have right now would be tricky to throw in a pen. I’ll keep fiddling with it. FWIW, I got the same error when trying to use $ionicGesture.on… on a regular element on my page. Even wrapped it in a ready function.

```
angular.element(document).ready(function () {
	$ionicGesture.on('tap', function(e) {
		// ...
	}, document.getElementById('mapInfo'));
});
```