Question

大家好！

有一个用于确定组件外部点击的代码

@HostListener('document:click', ['$event', '$event.target'])
public onClick($event, targetElement) {
    const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!isClickedInside) {
        this.onClickOutsideEvent.emit($event);
    }
}

如果在内部单击，但在嵌套组件上单击，为什么单击在外部定义？

Answer 1

当您将其设置为要监视的元素的包装div上的侦听器时，上述代码的逻辑可以正常工作。该div应该是屏幕大小，并将接收文档上的所有点击事件。当点击不在该div内部时，它通过消除逻辑进入您正在监视的元素内部。我会完成以下内容：

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

demo

角。如何定义外部点击，不包括子组件？

1 个答案: