Javascript 单击事件在：活动选择器之后触发

在我的Angular应用程序中，我有一个按钮，有一点动画，当你点击它时，它会下降几个像素：

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

它还有一个

（单击）=“myFunction（）”

事件侦听器

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

我制作了一个代码沙盒来演示：

有没有办法在点击事件后激活“活动”选择器触发器？或者以其他方式达到同样的效果

谢谢，

来自for

：active

：

：active CSS伪类表示用户正在激活的元素（如按钮）。使用鼠标时，“激活”通常在用户按下鼠标主按钮时开始

以及单击事件的：

在同时触发mousedown和mouseup事件后，按顺序单击fires

因此，简而言之，您的问题是因为

：active

的css转换在

mousedown

上启动的，而

myFunction（）

在

mouseup

之前不会启动

---

将

（单击）=“myFunction（）”

更改为

（鼠标向下）=“myFunction（）”

，您将有一个解决方法

在myFunction（）中添加样式，即document.getElementById（“id”）.style.margin=“15px”。

使用

mouseup

事件，而不是单击

工作小提琴-

--HTML--

测试

test() {
    const btn = document.querySelector("button");
    btn.style.margin = "15px 0 0 0";
    this.clicked++;
    setTimeout(() => {
      btn.style.margin = "";
    }, 100);
  }

<button class="btn" (mouseup)="test()">Test</button>