现在这是一个很难解释的复杂问题,我会尽力。
我有一个弹出窗口,我想从中唯一地标识点击事件是来自弹出窗口内部还是外部。
我的第一种方法:我用带有 id
的 div
包围整个弹出窗口,说“唯一”。
因此,我将单击事件与主机监听器绑定(bind),我将为其获取事件对象。因此,如果我遍历 event.path
--- 这包含一个对象数组 --- 这些对象的索引之一中有一个字段 id
,这将为我提供我的 id
的名称。
注意:此索引将始终是动态的 - 但 id
将在索引之一中得到保证。我需要遍历直到这个id
。请帮忙。我附上了一些图像以便更好地可视化。
主机监听器:
事件对象:
通过扩展它,我们得到了唯一的父 ID:
最佳答案
事件的 path
属性仅在 Chrome 中可用,且未记录。您可以使用等效的 composedPath()
,但 IE 和 Edge 尚不支持。
如果你不关心这种支持,你可以这样做。了解我如何使用 ViewChild
来获取正确的元素。这种方式更好,因此您不需要使用愚蠢的 ID:
@ViewChild('elementYouCareAbout', {read: ElementRef}) element: ElementRef<any>;
@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {
const isInside = event.composedPath().includes(this.element.nativeElement);
}
现在,如果您确实关心 IE 和 Edge 支持,还有另一种方法可以检查它,那就是使用 parentElement
属性:
@ViewChild('elementYouCareAbout') element: ElementRef<any>;
@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {
let isInside = false;
let target = event.target;
while(target && !isInside) {
isInside = this.element.nativeElement === target;
target = target.parentElement;
}
// if inside than isInside is true
}
此代码尚未经过测试,因此请注意
关于Angular - 如何解析 event.path 内的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52879324/