[英]Button click event can not be triggered when it triggered blur event for other element
Updated:更新:
In Angular 10, want to display/hide a button base on a boolean value.在 Angular 10 中,想要基于布尔值显示/隐藏按钮。 Code like below:
代码如下:
<button mat-icon-button *ngIf="isOnFocus">
<mat-icon (click)="copyContent()">content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>
Before clicking the button, the focus was on div
element.在单击按钮之前,焦点在
div
元素上。 The click event on mat-icon
can not be triggered when the button displayed.按钮显示时无法触发
mat-icon
上的点击事件。
Try to set the trigger
to the button
instead of content
.尝试将
trigger
设置为button
而不是content
。
<button mat-icon-button [hidden]="!isOnFocus" (click)="copyContent()">
<mat-icon>content_copy</mat-icon>
</button>
Event execution order: mousedown -> blur -> mouseup ->click
.事件执行顺序:
mousedown -> blur -> mouseup ->click
。 Changed click
to mousedown
, and moved the click event to <button>
tag as BadPiggie suggested, all works fine.将
click
更改为mousedown
,并按照 BadPiggie 的建议将 click 事件移动到<button>
标签,一切正常。
<button mat-icon-button *ngIf="isOnFocus" (mousedown)="copyContent()">
<mat-icon >content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.