ionic2 tap vs click

Question

I am starting with angular2 and ionic2;

In ionic2, I have a button that will call a method of my component. Like this:

<button secondary clear large>
</button>

Should I use (click) - angular2 OR (tap) - ionic2?

Like this:

(click)

<button secondary clear large (click)="pause()">
</button>

(tap)

<button secondary clear large (tap)="pause()">
</button>

There are some difference? You can see about (tap) in http://ionicframework.com/docs/v2/components/#gestures

Thx.

Marie

Because Ionic 2 built on top Angular 2. So Inside button you should use (click) event. – Sweepback

Answer 1

If making mobile apps, (tap) might be better. This is because when using (click) the action always executes, even when tapping accidently. The (tap) won't execute if the user holds it for a longer period. And if you want to have a button that needs to be clicked for a longer period of time you can use the (press).

Note that in some ionic versions the (click) event won't execute on iOS. Therefore using (tap) would be the recommended solution.

Gyro

You have highlighted the exact reason I need to use tap in some places on my app. If you use (click) and (press) then both get executed on 'press'. If you use (tap) and (press) this is not the case – Inspired

Ever heard of .stopPropagation(); ? – Breastwork

@Breastwork - Tried event.stopPropagation() on table cells that slide to delete and click to show details. When using click() it showed details regardless, and stopPropagation() had no effect. Changing to tap() instead fixed the problem. – Zora

Answer 2

I think it really depends on how "native like" you want the user experience to be.

The (tap) event comes from the Hammer.js library. If you look at the link you will see the requirements that must be met in order for the tap event to fire.

The first requirement to be aware of is the time option with a default value of 250ms. This means that if a press is greater than 250ms then the event won't fire.

The second requirement to be aware of is the threshold option with a default value of 2 (not sure what unit this is, possibly pixels). This means that if the press has movement greater than 2 the event will not fire. E.g. moving your finger in a left-to-right direction above the screen and then pressing the element during this movement the event may not fire depending on the speed of the movement.

However

The (click) event will still fire in both cases I just pointed out providing that when the press is released it is still inside the target element.

---

At the beginning the reason I said "it really depends" is based on how other apps handle these scenarios (each app could potentially differ and it may also differ based on the result of the use case).

As far as I'm aware buttons on the Android apps I have checked (the ones with a visual result e.g. navigation or popup messages) work in the same way as the (click) event provided by Angular.

I can't comment on how IOS apps work using the same principles as I haven't tested.

I am not implying that in every use case (click) should be used instead of (tap) but try take into consideration how other native apps behave and decide from there which is most suitable.

Thirty

ionic depends of Hammer.js library? – Marie

The Ionic gestures do yes. ionicframework.com/docs/v2/components/#gestures In other beta versions of the documentation they used to mention this but it looks like they don't in the latest version – Thirty

Answer 3

I would like to add that you can use (tap) event for elements like button, a, but for non-button elements the attribute tappable is usefull:

If you want instant clicks on non-button elements you have to add tappable directive to that element, otherwise it has a delay of 300ms. For example:

<div tappable (click)="someHandler()">Click me</div>

Woollen

but you can also use tap on buttons. So what's better? tap() or click() + tappable? – Easterner

Depends on the html element, for button and a (link) elements, I would use (tap) event, but other other html elements I would use tappable directive + (click) eventç – Woollen

Answer 4

I had problems with (click) in iOS but in Android it worked ok. In iOS when I changed application language and right after that clicked link it didn't do anything. I think that's related to Ionic click blocker https://github.com/driftyco/ionic/issues/6996.

But after I changed (click) to (tap) after language change link works instantly. I had also problems when language selection did not do anything (even after waiting some time) and changed that also from (click) to (tap) and it now works perfectly.

Picklock

same here. Some ionic versions seem to have problem activating (click) on iOS – Gyro

Have you tried to use ionic's WKWebview plugin for iOS? ionic iOS Apps work much better regarding events and performance with this one: ionicframework.com/docs/wkwebview – Woollen

Answer 5

In addition to the top voted question I'd like to point out that (tap) processes $event differently when used as a parameter. If I remember correctly, when using (tap) the target attribute in $event will be the element you actually tapped on, not the element that has the (tap) event binding. This would be relevant if you have child elements inside your element with (tap) bound to it.

Tabloid

So does that mean that when i have an <ion-list> with a tap event and I tap a child <ion-item>, I can see from the event which item was tapped instead of having to copy paste the tap functions? – Gyro

@Ivaro18 the $event variable will hold the element that you tapped on, which means that if you need the <ion-list> element, you'd have to track it down in the parent elements which in my opinion is a very hacky thing to do. You could bypass this bad practice in certain situations by passing on the actual data you need if available instead of using $event. – Tabloid

Answer 6

iOS has issues with click event in general (event on web, if you are testing in responsive mobile device in browser console).

So what usually happens is user have to click twice to perform actions.

I found of this is because if you are doing mobile development (chrome console or even iOS Emulator) you will have to use (tap) event instead.

The problem was hard to know because of it's irregular behaviour, when you are using (click) on ,

something which is usually non-clickable, this problem occurs.

So if you use (tap) on such elements and (click) on , everything should work fine.

My suggestion is to use both for the better!

Abacus