Angular 防止在子项隐藏时在父项div上重新触发鼠标指针

我有一个父div，用户的鼠标进入其中，然后他们单击子输入来隐藏它（mousedown）

当子对象被隐藏时，是否可以防止在父对象div上触发另一个mousenter

例如，序列当前变为：

onMouseEnter Blue Container
input mouseEnter
input hidden
onMouseEnter Blue Container 

我想防止触发最后一个“onMouseEnter Blue Container”（即，父鼠标指针不应再次触发）

Stackblitz在这里：

以下是我的组件：

<div [ngClass]="class" #target
    (mouseenter)="onMouseEnter($event)"
    (mouseleave)="onMouseLeave($event)">
    <input (mouseenter)="this.log('input mouseEnter')" 
           type="checkbox" (click)="doHide()" *ngIf="!hide"/>
</div>

---

而不是使用以下命令删除输入元素：

*ngIf="!hide"

您可以使用以下选项将其隐藏：

[hidden]="hide"

这似乎可以避免在父对象上触发

mouseenter

事件

请参见演示

[hidden]="hide"