如何检测鼠标是否以角度方式离开窗口?

Question

我想检测鼠标是否离开了浏览器窗口，而不仅仅是特定的div，因此不使用HTML中的(mouseleave(等方法。有办法吗？

更新：

父组件：

<div class="parent" (dragover)="openDialogComponent()"></div>
@HostListener('window:dragleave') onMouseLeave() {
console.log('leave window?');
}

实际发生的情况：将文件拖到父组件上时，对话框组件将打开。当文件被拖动到对话框组件上时，它会关闭，因为它离开了父组件区域，从而在弹出窗口上产生闪烁效果。

我想发生的事情：当鼠标离开父组件和对话框组件时，或者换句话说，当鼠标/拖动事件离开浏览器/整个窗口时，如何关闭对话框组件？

Answer 1

你可以为此使用HostListener，

@HostListener('window:mouseleave', ['$event.target']) onMouseLeave() {
// do something
}

关键是指令侦听的 DOM 事件。若要侦听全局事件，请将目标添加到事件名称。目标可以是窗口、文档或正文。

请参阅官方文档。