Предотвращение повторного ввода мыши в родительский элемент div, когда дочерний элемент скрыт - PullRequest
Новая
       33

Предотвращение повторного ввода мыши в родительский элемент div, когда дочерний элемент скрыт

1 голос
/ 29 мая 2019

У меня есть родительский div, в который входит мышь пользователя, затем они щелкают по дочернему входу, чтобы скрыть его (mousedown).

Можно ли предотвратить запуск другого муссента на родительском элементе div, когда ребенок скрыт?

Например, последовательность в настоящее время становится: 

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

1 Ответ

1 голос
/ 29 мая 2019

Вместо удаления элемента ввода с помощью: 

*ngIf="!hide"

вы можете скрыть его с помощью: 

[hidden]="hide"

Это, по-видимому, предотвращает запуск события mouseenter на родительском элементе..

См. этот стек для демонстрации.

...