Javascript 按钮单击事件在触发其他元素的模糊事件时无法触发

更新：

在Angular 10中，希望基于布尔值显示/隐藏按钮。代码如下：

<button mat-icon-button *ngIf="isOnFocus">
  <mat-icon (click)="copyContent()">content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>

内容拷贝
{{content}}

单击按钮之前，焦点是

div

元素。

---

当按钮显示时，

mat图标

上的点击事件无法触发。

尝试将

触发器

设置为

按钮

，而不是

内容

<button mat-icon-button [hidden]="!isOnFocus" (click)="copyContent()">
  <mat-icon>content_copy</mat-icon>
</button>

内容拷贝

事件执行顺序：

mousedown->blur->mouseup->click

。 将

click

更改为

mousedown

，并按照BadPiggie的建议将click事件移动到

标记，一切正常

<button mat-icon-button *ngIf="isOnFocus" (mousedown)="copyContent()">
  <mat-icon >content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>

内容拷贝
{{content}}

尝试过了，问题仍然存在。它在这里工作，Maniraj，你说得对。我发现在我的应用程序中，按钮点击触发了另一个元素的

blur

事件，因此按钮点击本身被中断。非常感谢。事件执行顺序：

mousedown->blur->mouseup->click

。将

单击

更改为

鼠标向下

，一切正常。