Ionic Framework: How To Fix Slow Tap on Components and Elements

Ionic Framework: How To Fix Slow Tap on Components and Elements

Ionic Framework comes with lots of Angular Components. If you create custom components or html elements and then use a click handler (click)=”itemTap()” you may notice a delay if the elements are not an anchor tag or button. I’ve had some items on iOS depending on my markup and CSS that wouldn’t navigate unless I double tapped. This works well on items that are not navigation links. You get a slight performance bump.

Its an easy fix, add tappable as an attribute to your element or component.

<div (click)="itemTap($event)" tappable></div>

Note, using anchors to navigate and buttons to execute javascript is valid html but I dislike restyling a button for various elements that have click handlers. If you don’t use the button element for clickable items then add the following attribute to your div etc. So use a button if you can but if not then use the button role on non button clickable  elements.



UPDATE: Someone on Twitter asked why not use tap event instead. You could use the tap event but the behavior is a bit different than a click. Click events happen as soon as you click the element. Tap doesn’t. If you use tap event and hold then release the event doesn’t happen because that is a different gesture. So, it’s a choice of how you want your app to behave. Read here for some of the gestures in ionic.

Leave a Reply

Your email address will not be published. Required fields are marked *