点击事件在:active选择器之后被触发

Question

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

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

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

问题在于，每当我点击按钮顶部时，它不会触发函数，因为它先向下移动，因此单击不位于按钮上。

我制作了一个codesandbox来演示：https://codesandbox.io/s/angular-bx8nd?fontsize=14 有没有办法让'active'选择器在单击事件后触发？或通过其他方式实现相同的效果？

谢谢，

- Raytho

Answer 1

从MDN文档中了解到，:active是 CSS 伪类，表示被用户激活的元素（例如按钮）。使用鼠标时，“激活”通常在用户按下主鼠标按钮时开始。

从MDN文档中了解到click事件在mousedown和mouseup事件后以此顺序触发。

简而言之，您遇到的问题是由于 :active 的 CSS 过渡在 mousedown 时触发，而 myFunction() 直到 mouseup 才会触发。将 (click)="myFunction()" 更改为 (mousedown)="myFunction()" 即可解决问题。

- Ryan

Answer 2

在myFunction()函数内添加样式，例如document.getElementById("id").style.margin="15px"。

- sarru1291

Answer 3

使用 mouseup 事件代替 click 事件。

可工作的 Fiddle - https://codesandbox.io/s/angular-2z45i?fontsize=14

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

--HTML--

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

- random