Angular 鼠标点击事件

Question

我经常遇到与 this discussion 所述相同的问题。

我无法重现这种情况（因为它通常发生在一个复杂的项目中），但环境可以缩短为以下代码：

<input id="input1" type="text" [(ngModel)]="value1" />
<button id="button1" type="button" (click)="onClick()">Button</button>

onClick() {
  console.log('click');
}

然而，由于 #input1 被聚焦，我尝试点击 #button1，直到第二次点击它才触发 onClick() 功能。

我发现了一些有时有助于解决此问题的其他方法：例如使用 NgZone，或将 (click) 更改为 (mousedown)。但是，我想知道为什么会这样？在开发过程中有什么注意事项可以避免这种情况吗？

在the discussion中，我看到他们在谈论mouseup never been registered according to the view change，但我不太明白，所以我重新提出问题再次，希望对问题有更多的了解。谢谢你的帮助。

Answer 1

试试这个

<button (click)="myMouseClicked($event)">Mouse Click</button>

Than Your App component

 export class AppComponent {

      myMouseClicked(event) {
        console.log(event);
        alert("Mouse Clicked");
      }

    }

Angular MouseClick event