使用touchstart和/或单击（鼠标向下）Angular 6

Question

问题：

我有一个问题，在整个应用程序中都使用了click事件。该应用程序将同时在移动设备和网络上使用。我正在使用Angular 6。

每次在我的桌面浏览器上单击一个按钮或链接时，第一次单击即起作用，但在移动设备上，单击有时不起作用。如果我错了，请指正我，但我相信人们将其称为“虚假点击”。

我以为这是300ms的延迟，但是我尝试使用Hammerjs的点击并尝试了fastclick，这似乎不是问题。

我尝试在html中使用touchstart而不是单击/点击，这似乎摆脱了这个问题。

是否可以将mousedown和touchstart相互绑定？ 有没有一种方法可以只在桌面上使用单击/鼠标按下并在移动设备上使用touchstart？
我还可以通过哪些其他方式解决此问题？

Answer 1

如果您使用的是Angular 6，默认情况下它将在内部使用Hammerjs库来处理触摸手势事件。此外，它还消除了300ms双击延迟。这是有关Angular中的“触摸手势”的详细解释的URL。 https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0

Answer 2

尝试使用模板：

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

您现在可以在组件中使用$ event数据：

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

Answer 3

我发现如果 Angular 是一个移动应用程序，你应该总是使用 (mousedown) 而不是 (click) 按钮。由于 DOM 问题，单击事件有时不会注册。为获得最佳性能，只需使用 mousedown。