javascript - Using touchstart andor click (mousedown) Angular 6 - Stack Overflow

admin管理员组

文章数量:1278690

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?

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?

• javascript
• angular
• mouseevent
• dom-events
• touch-event

Share Improve this question Follow edited Oct 9, 2019 at 21:23 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 4, 2018 at 17:29 SethSeth 6111 gold badge11 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Try in your template:

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

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

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

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./gestures-in-an-angular-application-dde71804c0d0

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.

本文标签： javascriptUsing touchstart andor click (mousedown) Angular 6Stack Overflow