@hostlistener onClick在Firefox中不起作用。我尝试了OnClick,OnClick和Onglobalclick。它们都在铬中工作,但没有人在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);
}
}
这是我在所有浏览器中测试的内容,并且有效:
@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);
}
}
event.path
仅在Firefox中返回Undfection,但它在Chrome and Edge浏览器中返回一个数组(NG-Version =&quot =&quot; 10.1.6&quort; quort;
解决方案 - 使用 event.composedPath()
而不是event.path
,其返回在Firefox,Chrome和Edge Browser中相同的数组。
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
}