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

Question

问题：

我在使用单击事件的整个应用程序中遇到了问题。 该应用程序将在移动和网络上使用。 我正在使用 Angular 6。

每次您在我桌面上的浏览器上单击按钮或链接时，它都会在第一次单击时起作用，但在移动设备上，单击有时不起作用。 如果我错了，请纠正我，但我相信人们将此称为幽灵点击。

我认为这是 300 毫秒的延迟，但我尝试使用hammerjs 的 tap 并尝试使用 fastclick，这似乎不是问题。

我尝试在 html 中使用 touchstart 而不是 click/tap，它似乎解决了这个问题。

有没有办法将 mousedown 和 touchstart 相互绑定？ 有没有办法在桌面上使用单击/鼠标按下并在移动设备上使用 touchstart？
我还有什么其他方法可以解决这个问题？

Answer 1

如果您使用的是 Angular 6，默认情况下它在内部使用hammerjs 库来处理触摸手势事件。 它还消除了双击的 300 毫秒延迟。 这是解释更多关于 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。