@HostListener OnClick 外部点击在 Firefox 中不起作用答案

【问题标题】：@HostListener OnClick for outside click does not work in firefox@HostListener OnClick 外部点击在 Firefox 中不起作用
【发布时间】：2018-02-10 04:51:46
【问题描述】：

@HostListener OnClick 在 Firefox 中不起作用。我尝试了 onClick、onclick 和 onGlobalClick。它们都在 chrome 中工作，但在 Firefox 中没有。这是我的代码：

constructor(private elRef: ElementRef, private renderer: Renderer2) { }

@Output() offClick = new EventEmitter();

@HostListener('document:click', ['$event.path'])
public onGlobalClick(targetElementPath: Array<any>) {
  const elementRefInPath = targetElementPath.find(e => e === this.elRef.nativeElement);
  if (!elementRefInPath) {
    this.offClick.emit(1);
  }
}

【问题讨论】：

你不能在某处添加 (click)="" 指令吗？
我不会全局点击“无处不在”，除了一些元素。我使用此指令是因为在外部单击时隐藏元素，并且在按下某些特定元素时不隐藏它
方法的名称不会改变事情。被解雇了吗？你登录了吗？
这是外部指令
它适用于chrome、edge和其他浏览器吗？

标签： javascript angular typescript firefox onclick

【解决方案1】：

event.path 仅在 Firefox 中返回 undefined，但在 Chrome 和 Edge 浏览器中返回一个数组 (ng-version="10.1.6")。

解决方案 - 使用 event.composedPath() 而不是 event.path，它在 Firefox、Chrome 和 Edge 浏览器中返回相同的数组。

HTML -

<button (click)="onClick($event)">Demo Button</button>

.ts -

@HostListener('document:click', ['$event'])
onClick(event: MouseEvent): void {
    console.log('event------', event.composedPath()); // working in Firefox, Chrome and Edge
}

【讨论】：

【解决方案2】：

这是我在所有浏览器中测试的结果，它可以工作：

 @HostListener('document:click', ['$event', '$event.target'])
    onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }
        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }

【讨论】：