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

Question

已更新：

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

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

在单击按钮之前，焦点位于div元素上。 显示按钮时，无法触发mat-icon上的点击事件。

Answer 1

尝试将trigger设置为button，而不是content。

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

Answer 2

事件执行顺序：mousedown -> blur -> mouseup ->click。 根据BadPiggie的建议，将click更改为mousedown，并将点击事件移至<button>标签，一切正常。

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