Using touchstart and/or click (mousedown) Angular 6

Question

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?

score 5 · Answer 1 · answered Dec 02 '20 at 04:38

5

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

answered Dec 02 '20 at 04:38

Boris Yakubchik

3,861
3
34
41

score 0 · Answer 2 · answered Sep 04 '18 at 17:40

0

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

answered Sep 04 '18 at 17:40

Suresh Kumar Ariya

9,516
1
18
27

I appreciate the response. I am currently using tap in hammerjs and this doesn't seem to fix the slow button response on mobile and sometimes you have to tap it twice for it to register. – Seth Sep 04 '18 at 19:41
you should use (click) which will work ofr both desktop and mobile – Suresh Kumar Ariya Sep 04 '18 at 19:46
(click) and (tap) seems to work the same, almost all of the app is created with (click), but the problem is (click) seem slower and doesn't respond as well. (touchstart) is the only one that seems to respond quickly, but I need it to work on desktop as well. – Seth Sep 04 '18 at 19:52
are you using ionic? – Suresh Kumar Ariya Sep 04 '18 at 20:14
I am not using ionic – Seth Sep 04 '18 at 20:15
1

@Seth have you fixed the issue.. we are also facing same issue. – Sathish Kotha Jul 23 '20 at 17:53

score 0 · Answer 3 · answered Jan 03 '21 at 04:06

0

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.

answered Jan 03 '21 at 04:06

Rick

1,710
8
17

Using touchstart and/or click (mousedown) Angular 6

3 Answers3