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

Question

我有一个父 div 用户鼠标进入的地方，然后他们单击子输入将其隐藏 (mousedown)。

是否可以在隐藏子项时阻止在父项 div 上触发另一个鼠标器？

例如，序列当前变为：

onMouseEnter Blue Container
input mouseEnter
input hidden
onMouseEnter Blue Container

我想防止最后一个 "onMouseEnter Blue Container" 被触发（即父 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。

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

Prevent retriggering mouseenter on parent div when child hidden

angular

mouseevent

mouseenter