Angular RouterLink need tap twice on IPad , IPhone

Question

When routerLink with any Browser on the IPad or IPhone , It's need tap to twice , first one tap will be hover ,and then second tap will be a route navigate .

I want it tap just once , anybody have some solution ?

but Android is Successful , just tap once then navigate to next page , how can I solve it?

---

I tried above sloution

1. use jquery listen 'touchStart' event and then call event.preventDefault

Answer 1

I've experienced this before. As I suspect, routerLink directive binds redirection to a 'click' event. This works just fine when running your application on a web browser of a laptop, but when running on a mobile or tablet, some things needs to be considered. On those environments there is no 'click' event as such (but this still works, though not as sensitive as we'd like).

What about instead of using the routerLink directive you listen to the 'touchstart' event on any element you want to navigate with? you can ensure it will be captured on tap, press, pan events... Then when this happens you just navigate programmatically and you stop the propagation of the event to prevent being fired multiple times.

From something like this;

<button routerLink="/myApp/somePage/etc">Navigate with one tap</button>

try this; In your component .html file

<button (touchstart)="navigate($event, '/myApp/somePage/etc')">
   Navigate with one tap
</button>

and in it's .ts file

import { Router } from '@angular/router';

...

constructor(router: Router){}

...

public navigate(touch: TouchEvent, url: string){
   touch.stopPropagation();
   this.router.navigate([url]);
}

For more information about mobile gesture events you can check hammerJs. The idea is that if you use your application on those environments you should listen or take into account those specific events which are more common on that context.