Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

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.

time-bandits-evil-leftovers

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.

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
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.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}