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.

Answer 1

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.

Answer 2

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!

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>

Answer 4

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.

Answer 5

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.

Answer 6

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.