检测点击外部元素但在父元素内部

Question

因此，当您单击汉堡包图标本身以外的任何位置时，我试图能够隐藏导航菜单。我让它工作，以便当您单击汉堡包图标时菜单在显示和隐藏之间切换。如果您单击页面本身，它也会隐藏菜单。问题是，如果您单击导航栏本身（但在汉堡图标之外），它不会隐藏菜单。我想我理解这是因为 handleClick() 函数正在寻找不包含事件目标的引用元素，但我不确定如何解决这个问题并仍然使其他一切正常工作。

这是组件的 HTML 文件：

<nav class="navbar fixed-top navbar-dark bg-primary">
    <button class="navbar-toggler" type="button" (click)="toggleMenu()">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand pull-right" href="#">Job Matrix</a>
</nav>
<div class="form-row btn-group-vertical nav-menu-fixed" *ngIf="visible" [@fade-in-out]="state">
    <a class="btn btn-primary text-left item" href="#" role="button">Jobs</a>
    <a class="btn btn-primary text-left item" href="#" role="button">Resumes</a>
</div>

这里是角组件打字稿文件：

import { Component, OnInit, ElementRef } from '@angular/core';
import { trigger, group, state, style, animate, transition } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.scss'],
    host: {
        '(document:click)': 'handleClick($event)',
    },
    animations: [
        trigger('fade-in-out', [
            state('open', style({
                transform: 'translate3d(0, 0, 0)'
            })),
            state('closed', style({
                transform: 'translate3d(0, -110%, 0)'
            })),
            transition('closed => open', animate('500ms ease-in')),
            transition('open => closed', animate('500ms ease-out'))
        ])
    ]
})

export class NavMenuComponent implements OnInit {
    [x: string]: any;

    visible: boolean;
    state: string;

    constructor(private ref: ElementRef) {
    }

    ngOnInit(): void {
        this.visible = false;
        this.state = 'closed';
    }

    toggleMenu() {
        this.visible = true;
        setTimeout(() => {
            this.state = this.state == "open" ? 'closed' : 'open';
        }, 50);
    }

    handleClick(event: Event) {
        if (!this.ref.nativeElement.contains(event.target)) {
            this.state = 'closed';
            setTimeout(() => {
                this.visible = false;
            }, 500);
        }
    }

}

Answer 1

现在，ref 为您提供了整个主机元素（汉堡包和菜单），但您似乎想将菜单 (.nav-menu-fixed) 分开，并且如果点击在菜单之外（包括 @ 987654325@)，关闭菜单。您可以使用@ViewChild 装饰器来获取菜单本身，并检查单击是否包含菜单。

向您的菜单组件添加一个引用 (#menu)：

<div #menu class="nav-menu-fixed" *ngIf="visible" [@fade-in-out]="state">
  <a class="btn btn-primary text-left item" href="#" role="button">Jobs</a>
  <a class="btn btn-primary text-left item" href="#" role="button">Resumes</a>
</div>

然后使用 @ViewChild 装饰器在 DOM 中查询该菜单元素。

export class NavMenuComponent implements OnInit {
    @ViewChild('menu', {read: ElementRef})
    menu: ElementRef;

    constructor() {}

    @HostListener('document:click', ['$event'])
    handleClick(event: Event) {
     const menuIsOpen = this.visible && this.state === 'open';
     const toggleWasClicked = this.toggle.nativeElement.contains(event.target);
     const menuWasClicked = this.menu && this.menu.nativeElement.contains(event.target);
     const pageWasClicked = !toggleWasClicked && !menuWasClicked;
     const menuShouldClose = (pageWasClicked || toggleWasClicked) && menuIsOpen;

     if (menuShouldClose) {
         this.state = 'closed';
         setTimeout(() => {
             this.visible = false;
         }, 500);
     }
    }    
}

我在我的 sn-p 中使用了 @HostListener 装饰器而不是 host 属性，因为我认为这是让事件侦听器靠近处理它的方法的好方法 :)