按钮点击事件在触发其他元素的模糊事件时无法触发答案

【问题标题】：Button click event can not be triggered when it triggered blur event for other element按钮点击事件在触发其他元素的模糊事件时无法触发
【发布时间】：2021-02-04 14:32:12
【问题描述】：

更新：

在 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的点击事件在按钮显示时无法触发。

【问题讨论】：

它在这里工作，stackblitz.com/edit/mat-button-icon-example-wl3931
Maniraj，你是对的。我发现在我的App中，按钮点击触发了另一个元素的blur事件，所以按钮点击本身就被中断了。谢谢你。我看错了方向。
事件执行顺序：mousedown -> blur -> mouseup ->click。将click 更改为mousedown，一切正常。

标签： javascript angularjs angular-material angular-ng-if

【解决方案1】：

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

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

【讨论】：

试过了，问题依旧。

【解决方案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>

【讨论】：