javascript - :active selector后触发点击事件

Question

在我的 Angular 应用程序中，我有一个带有小动画的按钮，当您单击它时它会下降几个像素:

&:active {
   margin: 15px 0 0 0;
}

它还有一个 (click)="myFunction()" 事件监听器。

问题是，每当我点击按钮顶部时，它都不会触发该功能，因为它之前会下降，因此点击不在按钮上。

我做了一个codesandbox来演示:https://codesandbox.io/s/angular-bx8nd?fontsize=14

有什么方法可以让“事件”选择器在点击事件后触发吗？或者以其他方式达到同样的效果？

谢谢，

Answer 1

来自MDN Docs对于 :active:

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

并且来自 MDN Docs对于点击事件:

click fires after both the mousedown and mouseup events have fired, in that order.

因此，简而言之，您的问题是因为 :active 的 css 转换在 mousedown 上触发，而 myFunction() 在 mouseup 之前不会触发。

将 (click)="myFunction()" 更改为 (mousedown)="myFunction()"，您将有一个解决方法。