Question

@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);
  }
}

Answer 1

以下是我在所有浏览器中测试过的内容并且有效：

 @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);
        }
    }

Answer 2

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
}

@HostListener OnClick for outside click在firefox中不起作用

2 个答案: