angular - 如何检查事件目标是在一个元素内还是在另一个元素内？

Question

我有“Card”组件，它正在监听外部点击或滚动事件，并在该事件发生时被销毁。

@HostListener('document:mousedown', ['$event'])
public onEvent(e: Event): void {
    let el = this.elementRef.nativeElement;
    if (e.target !== el && !el.contains(e.target)) {
        this.destroyCard();
    }
}

ngAfterViewInit() {
  document.addEventListener('scroll', this.onEvent, true);
}

当我从这个组件创建模态窗口时，问题就出现了，它是在应用程序 View 根目录中的这个组件之外创建的。当我单击模态窗口或在其上滚动时，我的 Card 组件随模态窗口一起被销毁。

这是沙盒 stackblitz with click .当您单击模态窗口时，它应该保留。

已更新。使用 event.stopPropagation() 修复。

但它不适用于通常不像滚动那样冒泡的事件。请看stackblitz with scroll .

我只看到一个解决方案:创建将监听事件的服务，我的 Card 组件和 Modal 窗口组件将订阅并将它们的节点添加到数组，数组将检查事件目标是否放置在该节点内。

也许有人知道更好的解决方案？

Answer 1

您可以在模态组件中处理 mousedown 事件，并调用 event.stopPropagation() 以确保它不会到达 document级别。您可以在 this stackblitz 中看到结果.

export class ModalWindowComponent {
    @HostListener('mousedown', ['$event'])
    public processMouseDown(event: MouseEvent): void {
        event.stopPropagation();
    }
}

重要:确保调用 event.stopPropagation()，而不是 event.stopImmediatePropagation()。

• event.stopPropagation() 防止事件冒泡到元素的祖先(参见 MDN documentation )
• event.stopImmediatePropagation() 只是阻止元素上剩余的监听器被调用(参见 MDN documentation )

---

对于滚动事件，调用event.stopPropagation 不起作用。如果滚动元素具有特定属性，例如 data-keepmodalopen="true"(小写)，您可以保持模式打开。下面是这种检查的代码(参见 this stackblitz 的演示):

<div class="container">Modal window. I should stay
  <div class="scroll-container" data-keepmodalopen="true">
    ...
  </div>
</div>

public onScroll(e: MouseEvent): void {
  if (this.window && !this.keepModelOpen(e.target as HTMLElement)) {
    this.window.destroy();
    this.window = null;
  }
}

public keepModelOpen(element: HTMLElement): boolean {
  return element.dataset.keepmodalopen === "true";
}