Over a million developers have joined DZone.

Quick Tip: Ionic Apps and Touch Events

DZone's Guide to

Quick Tip: Ionic Apps and Touch Events

Ionic handles touch versus click for you. Don’t worry and carry on.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

This afternoon I was working on some code that began life as a quick example in a desktop web app and than began to transition to an Ionic application. My desktop app had a button with a click event in it and when converting this to use ng-click, it suddenly occurred to me. How do you switch from a click event to a touch event? We all know (or hopefully know), why that is important for mobile web development, but I have to be honest. As much as I’m aware of that and try to always use it in my code, when it came to Ionic’s code, I just always used ng-click.

All of a sudden I realized that I had completely forgotten about using touch in my Ionic apps. Obviously things worked, but I had been using the wrong event in my demos and presentations. I was pure evil.


I assumed that Angular would just support touch built-in, perhaps via ng-touch, but surprisingly, this isn’t the case. You have to grab angular-touch.js to use ngTouch. Given how important mobile is, I’m kinda surprised that this isn’t baked in directly.

I was about to switch over to using it (I even ran bower, ewww….) when @breakingthings on the Ionic slack channel told me something that surprised me. Ionic fixed this already. In fact, if you go to the docs for Tap & Click, you’ll find this:

On touch devices such as a phone or tablet, some browsers implement a 300ms delay between the time the user stops touching the display and the moment the browser executes the
click. This delay was initially introduced so the browser can know whether the user wants to double-tap to zoom in on the webpage. Basically, the browser waits roughly 300ms to see if the user is double-tapping, or just tapping on the display once.
Out of the box, Ionic automatically removes the 300ms delay in order to make Ionic apps feel more “native” like. Resultingly, other solutions such as fastclick and Angular’s ngTouch should not be included, to avoid conflicts.

So yep, no need to worry about it (and you can disable it too if you want), Ionic has your back. And yes – this is yet another reason why I need to make the time to read the docs from start to end. I’ve been telling myself I’d do that for a while now, but I think I need to make it a priority for this month.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

ionic ,mobile

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}