[solved] Ionic 4 (press|tap) events

Ionic Framework
1

while trying to upgrade from ionic 3.9 to ionic 4-beta i encountered an inconsistency what is not documented in the Breaking changes.

in ionic 3 the event would propagate after a while if the button was long pressed

<button ion-button (press)="doSomething()">long press"</button>

but in ionic 4 no event is fired

<ion-button (press)="doSomething()">long press"</ion-button>

am i mission something?

2 Likes
2

i solved it by adding hammerjs to main.ts file

npm install hammerjs

in src/main.ts


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

/**
 * Hammerjs must be imported for gestures
 */
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
7 Likes
3

Thanks for this.
I have found it does not work on devices when using using Ionic DevApp but works fine after a build.

4

Thank’s:grinning:jhkjlhlkjhkjh

5

This may be off topic, but what is the difference of using the press event vs the click event?

6

Don’t know if it still applies to ionic 4 but in ionic 3 the (click) event would sometimes cause a lag event event firing if used on a mobile device compared to (tap) event; causing slight UI lag, so I always used (tap)

7

as in (tap)=myFunc() ? … (tap) doesn’t work for me … or you mean that (press) == (tap) ?
Actually neither works … only (click) … :confused:

8

I am also trying this but i can’t achieve triple click.
i am using this

what will do please help to solve this

9

There are issues using Hammerjs with Ionic 4 => https://github.com/ionic-team/ionic/issues/19183

10

Any solution for Ionic 5 without hammer-js to use (tap) and (press)? And without own directive.

11

I have not tried this myself but I think you can use this.

12

Yes and no. Actually no. Update: The Ionic team removed the (obsolete) hammer.js for Ionic 4+ and the events e.g. tap and press are gone. There is no official replacement for this build-in events. But it is planned that Ionic creates its own events in the future. But for now you have to create a directive which uses the GesturesController. Also note that there is currently a bug in Ionic using Gestures on buttons. It disables the ripple effects. Without this, the button feels like dead. But there is a workaround. See the issue on GitHub.