如何检测Angular中元素外部的点击？

Question

单击open panel按钮时，此div将作为东面板动态显示在页面上。 bool showEastPanel变量用于打开和关闭东面板。 我正在尝试使用(clickoutside)关闭面板（将showEastPanel设置为 false），但是打开的面板首先在Angular挂钩上运行，并且面板设置为 true 然后 false 并且面板不显示。 是否有任何方法可以将clickoutside范围clickoutside为不包含按钮？

 <div [ngClass]="{'d-none': !showEastPanel, 'east-panel-container': showEastPanel}" (clickOutside)="ClosePanel()"> <div id="east-panel"> <ng-template #eastPanel></ng-template> </div> </div> <button (click)="ShowPanel()">Open Panel</button>

Answer 1

这是工作演示的链接： Stackblitz Demo

我会通过使用 Angular 推荐的方法来做到这一点，该方法也很容易在没有 DOM 访问的环境中开发应用程序，我的意思是Renderer 2类，它是 Angular 以服务形式提供的抽象，允许操作应用程序的元素而无需必须直接接触 DOM。

在这种方法中，您需要将Renderer2注入到您的组件构造函数中， Renderer2可以让我们优雅地listen触发事件。 它只是将您要监听的元素作为第一个参数，它可以是window 、 document 、 body或任何其他元素引用。 对于第二个参数，它接受我们要监听的事件，在这种情况下是click ，第三个参数实际上是我们通过箭头函数执行的回调函数。

this.renderer.listen('window', 'click',(e:Event)=>{ // your code here})

解决方案的其余部分很简单，您只需要设置一个布尔标志来保持菜单（或面板）可见性的状态，我们应该做的是在菜单外单击时为该标志分配false 。

HTML

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

<div class="menu" *ngIf="isMenuOpen" #menu>
I'm the menu. Click outside to close me
</div>

app.component.ts

    export class AppComponent {
      /**
       * This is the toogle button elemenbt, look at HTML and see its defination
       */
      @ViewChild('toggleButton') toggleButton: ElementRef;
      @ViewChild('menu') menu: ElementRef;
    
      constructor(private renderer: Renderer2) {
        /**
         * This events get called by all clicks on the page
         */
        this.renderer.listen('window', 'click',(e:Event)=>{
             /**
              * Only run when toggleButton is not clicked
              * If we don't check this, all clicks (even on the toggle button) gets into this
              * section which in the result we might never see the menu open!
              * And the menu itself is checked here, and it's where we check just outside of
              * the menu and button the condition abbove must close the menu
              */
            if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
                this.isMenuOpen=false;
            }
        });
      }
    
      isMenuOpen = false;
    
      toggleMenu() {
        this.isMenuOpen = !this.isMenuOpen;
      }
    }

同样，如果您想查看工作演示，请使用此链接： Stackblitz Demo

Answer 2

你可以做这样的事情

  @HostListener('document:mousedown', ['$event'])
  onGlobalClick(event): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
        // clicked outside => close dropdown list
     this.isOpen = false;
     }
  }

并为面板使用 *ngIf=isOpen

Answer 3

我想添加帮助我获得正确结果的解决方案。

当使用嵌入元素并且您想要检测父级上的点击时， event.target 提供对基本子级的引用。

HTML

<div #toggleButton (click)="toggleMenu()">
    <u>Toggle Menu</u>
    <span class="some-icon"></span>
</div>

<div #menu class="menu" *ngIf="isMenuOpen">
    <h1>I'm the menu.</h1>
    <div>
        I have some complex content containing multiple children.
        <i>Click outside to close me</i>
    </div>
</div>

我单击“切换菜单”文本，event.target 返回对'u'元素而不是#toggleButton div 的引用。

对于这种情况，我使用了 M98 的解决方案，包括 Renderer2，但将条件更改为 Sujay 的回答中的条件。

ToggleButton.nativeElement.contains(e.target) 即使单击事件的目标在 nativeElement 的子级中也返回true ，从而解决了问题。

组件.ts

export class AppComponent {
/**
 * This is the toogle button element, look at HTML and see its definition
 */
    @ViewChild('toggleButton') toggleButton: ElementRef;
    @ViewChild('menu') menu: ElementRef;
    isMenuOpen = false;

    constructor(private renderer: Renderer2) {
    /**
     * This events get called by all clicks on the page
     */
        this.renderer.listen('window', 'click',(e:Event)=>{
            /**
             * Only run when toggleButton is not clicked
             * If we don't check this, all clicks (even on the toggle button) gets into this
             * section which in the result we might never see the menu open!
             * And the menu itself is checked here, and it's where we check just outside of
             * the menu and button the condition abbove must close the menu
             */
            if(!this.toggleButton.nativeElement.contains(e.target) && !this.menu.nativeElement.contains(e.target)) {
                this.isMenuOpen=false;
            }
        });
    }

    toggleMenu() {
        this.isMenuOpen = !this.isMenuOpen;
    }
}

Answer 4

这是一个可重用的指令，它也涵盖了元素在 ngIf 内的情况：

import { Directive, ElementRef, Optional, Inject, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { filter } from 'rxjs/operators';

@Directive({
  selector: '[outsideClick]',
})
export class OutsideClickDirective implements OnInit, OnDestroy {
  @Output('outsideClick') outsideClick = new EventEmitter<MouseEvent>();

  private subscription: Subscription;

  constructor(private element: ElementRef, @Optional() @Inject(DOCUMENT) private document: any) {}

  ngOnInit() {
    setTimeout(() => {
      this.subscription = fromEvent<MouseEvent>(this.document, 'click')
        .pipe(
          filter(event => {
            const clickTarget = event.target as HTMLElement;
            return !this.isOrContainsClickTarget(this.element.nativeElement, clickTarget);
          }),
        )
        .subscribe(event => this.outsideClick.emit());
    }, 0);
  }

  private isOrContainsClickTarget(element: HTMLElement, clickTarget: HTMLElement) {
    return element == clickTarget || element.contains(clickTarget);
  }

  ngOnDestroy() {
    if (this.subscription) this.subscription.unsubscribe();
  }
}

归功于https://github.com/ngez/platform ，我从中获得了大部分逻辑。

我缺少的是 setTimeout(..., 0)，它确保在使用指令的组件呈现后安排检查。

有用的链接：

• https://stackoverflow.com/a/779785/5869296
• https://github.com/ngez/platform

Answer 5

我喜欢 Sujay 的回答。 如果您希望创建一个指令（在多个组件中使用）。 这就是我要做的。

import {
  Directive,
  EventEmitter,
  HostListener,
  Output,
  ElementRef,
} from '@angular/core';

@Directive({
  selector: '[outsideClick]',
})
export class OutsideClickDirective {
  @Output()
  outsideClick: EventEmitter<MouseEvent> = new EventEmitter();

  @HostListener('document:mousedown', ['$event'])
  onClick(event: MouseEvent): void {
    if (!this.elementRef.nativeElement.contains(event.target)) {
      this.outsideClick.emit(event);
    }
  }

  constructor(private elementRef: ElementRef) {}
}

然后你可以像这样使用指令：

<div class="menu" *ngIf="isMenuOpen" (outsideClick)="isMenuOpen = false" outsideClick #menu>
  I'm the menu. Click outside to close me
</div>

Answer 6

与以前的答案不同，我做了其他方式。

我把mouseleave , mouseenter事件放在下拉菜单上

<div
    class="dropdown-filter"
    (mouseleave)="onMouseOutFilter($event)"
    (mouseenter)="onMouseEnterFilter($event)"
  >
    <ng-container *ngIf="dropdownVisible">
      <input
        type="text"
        placeholder="search.."
        class="form-control"
        [(ngModel)]="keyword"
        id="myInput"
        (keyup)="onKeyUp($event)"
      />
    </ng-container>
    <ul
      class="dropdown-content"
      *ngIf="dropdownVisible"
    >
      <ng-container *ngFor="let item of filteredItems; let i = index">
        <li
          (click)="onClickItem($event, item)"
          [ngStyle]="listWidth && {width: listWidth + 'px'}"
        >
          <span>{{ item.label }}</span>
        </li>
      </ng-container>
    </ul>
  </div>

  constructor(private renderer: Renderer2) {
    /**
     * this.renderer instance would be shared with the other multiple same components
     * so you should have one more flag to divide the components
     * the only dropdown with mouseInFilter which is false should be close
     */
    this.renderer.listen('document', 'click', (e: Event) => {
      if (!this.mouseInFilter) {
        // this is the time to hide dropdownVisible
        this.dropdownVisible = false;
      }
    });
  }

  onMouseOutFilter(e) {
    this.mouseInFilter = false;
  }

  onMouseEnterFilter(e) {
    this.mouseInFilter = true;
  }

并确保 mouseInFilter 的 defaultValue 为 false；

  ngOnInit() {
    this.mouseInFilter = false;
    this.dropdownVisible = false;
  }

当下拉菜单应该可见时，mouseInFilter 将是真的

  toggleDropDownVisible() {
    if (!this.dropdownVisible) {
      this.mouseInFilter = true;
    }
    this.dropdownVisible = !this.dropdownVisible;
  }

Answer 7

我在我的一项要求中做了同样的事情，当用户点击菜单图标时显示超级菜单弹出窗口，但想要关闭它，用户点击它之外。 在这里，我也试图防止点击图标。 请看一看。

在 HTML 中

 <div #menuIcon (click)="onMenuClick()">
  <a><i class="fa fa-reorder"></i></a>
 </div>
<div #menuPopup  *ngIf="showContainer">
   <!-- Something in the popup like menu -->
</div>

在 TS

  @ViewChild('menuIcon', { read: ElementRef, static: false })  menuIcon: ElementRef;
  @ViewChild('menuPopup', { read: ElementRef, static: false })  menuPopup: ElementRef;
   showContainer = false;

      constructor(private renderer2: Renderer2) {
      this.renderer2.listen('window', 'click', (e: Event) => {
        if (
         (this.menuPopup && this.menuPopup.nativeElement.contains(e.target)) ||
          (this.menuIcon && this.menuIcon.nativeElement.contains(e.target))
         ) {
              // Clicked inside plus preventing click on icon
             this.showContainer = true;
           } else {
             // Clicked outside
             this.showContainer = false;
         }
      });
    }

     onMenuClick() {
        this.isShowMegaMenu = true;
      }

Answer 8

您可以使用https://github.com/arkon/ng-click-outside ，它非常易于使用，具有许多有用的功能：

@Component({
  selector: 'app',
  template: `
    <div (clickOutside)="onClickedOutside($event)">Click outside this</div>
  `
})
export class AppComponent {
  onClickedOutside(e: Event) {
    console.log('Clicked outside:', e);
  }
}

---

关于性能，当指令未激活时，lib 使用ngOnDestroy删除侦听器（使用clickOutsideEnabled属性），这非常重要，并且大多数提议的解决方案都没有这样做。 请参阅此处的源代码。

Answer 9

感谢 Emerica ng-click-outside工作完美，这就是我所需要的，我正在测试我的模态，但是当我点击它时，第一次点击按钮，它检测到外部点击，然后没有工作来放置模态，但我只从文档中添加了delayClickOutsideInit="true"并且效果很好，这是最终结果：

<button
  (click)="imageModal()"
>
<button/>

<div
  *ngIf="isMenuOpen"
>
  <div
    (clickOutside)="onClickedOutside($event)"
    delayClickOutsideInit="true"
  >
   Modal content
  </div>
</div>

这是我的组件

import {
  Component,
} from '@angular/core';

@Component({
  selector: 'app-modal-header',
  templateUrl: './modal-header.component.html',
  styleUrls: ['./modal-header.component.css'],
})
export class ModalHeaderComponent implements OnInit {
  public isMenuOpen = false;

  constructor() {}

  imageModal() {
    this.isMenuOpen = !this.isMenuOpen;
  }
  closeModal() {
//you can do an only close function click
    this.isMenuOpen = false;
  }
  onClickedOutside(e: Event) {
    this.isMenuOpen = false;
  }
}

Answer 10

带有演示的更简化代码： StackBlitz

我做了一个通用功能来关闭外部点击菜单，并防止在特定元素上触发点击时关闭。

HTML

<button (click)="toggleMenu(); preventCloseOnClick()">Toggle Menu</button>
<ul (click)="preventCloseOnClick()" *ngIf="menuOpen">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
</ul>

TS

import { Component, VERSION, Renderer2 } from '@angular/core';

export class AppComponent {
  menuOpen: boolean = false;
  menuBtnClick: boolean = false;

  constructor(private renderer: Renderer2) {
    this.renderer.listen('window', 'click', (e: Event) => {
      if (!this.menuBtnClick) {
        this.menuOpen = false;
      }
      this.menuBtnClick = false;
    });
  }
  toggleMenu() {
    this.menuOpen = !this.menuOpen;
  }
  preventCloseOnClick() {
    this.menuBtnClick = true;
  }
}

Answer 11

如果 click() 和 clickOutside() 同时被触发，那么你必须参考

https://github.com/arkon/ng-click-outside/issues/31

它解决了我的问题