Question

我有点击方法的指令

  @Directive({
selector: '[clickOutside]'
   })
 export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {
}

@Output()
public clickOutside = new EventEmitter<MouseEvent>();

@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {

    if (!targetElement) {
        return;
    }

    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {

        console.log(event)
       console.log(event.path) =>gives error,not able to compile

        console.log("targetelement",targetElement)
        console.log("native element",this._elementRef.nativeElement)
        this.clickOutside.emit(event);
    }
}
}

我想获得活动的路径属性。当我console.log（事件）它的获取，我可以看到路径属性，但当我试图访问event.path 我收到编译错误，为什么会这样？如何在onClick方法中访问当前的click事件及其内部属性？

Answer 1

documentation for MouseEvent中没有列出path属性，也没有列出超类的文档。正如您所发现的，MouseEvent的TypeScript定义中也没有这样的path属性。

所以你想在浏览器中使用运行时存在的属性，但是没有记录，因此可能不是标准的，因此可能在其他浏览器中不存在。您可以自由地这样做，但您应该意识到风险。只需使用event['path']代替event.path。

无法在指令中加入事件的内部属性？

1 个答案: