Touch events

1

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?

2

You can try these docs:

EventController docs or Ionic Blog

3

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

4

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

5

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);
6

Try this format,

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

}, break);
7

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.

8

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

9

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'));
});