CODEWITHSUNDEEP
javascriptangularmouseeventdom-eventstouch-event
Seth
Seth

Reputation: 61

Using touchstart and/or click (mousedown) Angular 6

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?

Upvotes: 6

Views: 19601

Answers (3)

Rick
Rick

Reputation: 1870

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.

Upvotes: 0

Boris Yakubchik
Boris Yakubchik

Reputation: 4453

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);
}

Upvotes: 5

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

If you are using Angular 6, Be default it internally uses hammerjs library to handle touch gesture events. Also it removes 300ms delay for double tap. Here is the URL that explains more on Touch Gesture in Angular. https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0

Upvotes: 0

Related Questions