Using touchstart and/or click (mousedown) Angular 6

user_8190049 0
Viewed 13944

Issue:

I have a problem where in the whole application where click event is used. The app will be used on both mobile and web. I am using Angular 6.

Every time you click on a button or link on the browser on my desktop it works on first click, but on mobile the click doesn't work sometimes. correct me if I'm wrong, but I believe people refer this as the ghost click.

I thought that this was the 300ms delay, but I have tried using hammerjs's tap and tried fastclick instead and it seems like its not the issue.

I have tried using touchstart in html instead of click/tap and it seems to get rid of the issue.

Is there a way to bind mousedown and touchstart to each other? is there a way to use just click/mousedown on desktop and touchstart on mobile?
What other ways can I go about fixing this?

angular touch-event mouseevent dom-events javascript
3 Answers

Try in your template:

<div
  (touchmove)="touchMoving($event)"
  (touchstart)="touchStart($event)"
  (touchend)="touchEnd($event)"
>

In your component you can now use the $event data:

touchMoving($event) {
  console.log($event);
}
user_50173910
user_101549510

I have found that you should ALWAYS use (mousedown) instead of (click) for buttons in Angular if its a mobile app. With click the event sometimes will not register due to DOM issues. For best performance just use mousedown.

user_122715690
Related