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

【问题标题】：Prevent retriggering mouseenter on parent div when child hidden子隐藏时防止在父 div 上重新触发 mouseenter
【发布时间】：2019-05-29 10:52:05
【问题描述】：

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

当孩子被隐藏时，是否可以防止在父div上触发另一个mouseenter？

例如，当前序列变为：

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')
    }
  }

【问题讨论】：

标签： angular mouseevent mouseenter

【解决方案1】：

而不是删除输入元素：

*ngIf="!hide"

你可以隐藏它：

[hidden]="hide"

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

请参阅this stackblitz 以获取演示。

【讨论】：