角8+事件停止传播

Question

我有一个viewChild元素，通过给它赋值来显示/隐藏它。

<div #acc class="user-info" [ngClass]="{'showDropdown': accountDropdownService.userDropdownIsVisible}">
  <div class="user-name">
    <div class="color-1 full-name">{{userdata.FirstName}} {{userdata.LastName}}</div>
    <div class="opened-eye-icon color-6__fm icon-icon_visible_off"
         [class]="balanceService.showBalance ? 'icon-icon_visible_off' : 'icon-icon_visible'"
         (click)="balanceService.toggleBalanceVisibility()"></div>
  </div>
  <div class="user-id color-6__fm">{{'General.Id'}}: <span><strong>{{userdata.Id}}</strong></span></div>
</div>

及其.ts文件

@ViewChild('acc') public acc: ElementRef;

this.renderer.listen('window', 'click', (e: Event) => {
      if (e.target !== this.acc.nativeElement) {
        console.log('outside');
        console.log(e.target);
      }
    });

当我单击外部时，我需要隐藏viewChild元素，但当我单击它的子元素(如用户名或用户id)时，它也可以理解为外部单击。

当我点击div的子元素时，如何防止这种情况发生呢？

Answer 1

您希望确保目标不是容器的后代，而不仅仅是容器本身。您应该使用contains()代替。

this.renderer.listen('window', 'click', (e: Event) => {
  if (!this.acc.nativeElement.contains(e.target)) {
    console.log('outside');
    console.log(e.target);
  }
});

否则，您将希望停止子节点的单击事件处理程序中的传播，这样，此窗口侦听器就不会看到该事件。但这对你来说可能比需要的要多。