子级隐藏时，防止在父div上重新触发mouseenter

Question

我有一个父div，用户在其中输入了鼠标，然后他们单击了子输入以将其隐藏（鼠标按下）。

是否可以防止在隐藏孩子时触发父div上的另一个mousenter？

例如，当前序列变为：

onMouseEnter Blue Container
input mouseEnter
input hidden
onMouseEnter Blue Container 

我想防止触发最后一个“ onMouseEnter蓝色容器”（即，父mouseEnter不应再次触发）。

Stackblitz在这里：https://stackblitz.com/edit/angular-mouseenter-dquf3y

以下是我的组件：

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

下面是我的TS：

onMouseEnter($event) {
    this.log('onMouseEnter Blue Container');
    this.isHovering = true;
  }

  onMouseLeave($event) {
    this.log('onMouseLeave');
    this.isHovering = false;
  }

  hide = false;
  doHide() {
    this.hide = !this.hide;
    if (this.hide === true) {
      this.log('input hidden')
    }
  }

Answer 1

代替使用以下命令删除输入元素：

*ngIf="!hide"

您可以使用以下方法将其隐藏：

[hidden]="hide"

这似乎避免了在父级上触发mouseenter事件。

有关演示，请参见this stackblitz。