@HostListener 无法正常工作答案

【问题标题】：@HostListener not working in a proper way@HostListener 无法正常工作
【发布时间】：2020-05-28 07:58:42
【问题描述】：

我使用 HostListener 创建了一个拖动事件监听器来检查元素是被拖动到浏览器窗口内部还是外部，所以当元素被拖动到浏览器窗口内部时，它会向我显示一个写在里面的 div“放置区”它把你的文件放在这里，当我离开浏览器窗口时，我希望那个 div 消失。

我的 2 个事件监听器：

displayDropZone: boolean = false;

  @HostListener('window:dragenter', ['$event'])
  onDragEnter() {
   console.log(" DRAG ENTER")
   this.displayDropZone = true;
 }

  @HostListener('window:dragleave', ['$event'])
   onDragLeave() {
    console.log(" DRAG LEFT")
    this.displayDropZone = false;
 }

根据拖动事件显示的 div：

           <div *ngIf="displayDropZone" style="background-color: black;" id="dropzone" 
                  (dragover)="false"
                (dragend)="false" (drop)="handleDrop($event)">
                <p style="margin: 16%; text-align: center"> <strong>Drop Your Images Here</strong> 
           </p>
            </div>

所以问题是 div 一直同时显示和隐藏，并且拖动事件没有以正确的方式工作，因为当拖动的元素仍在浏览器窗口中时，它说 DRAG LEFT 我没有即使我没有离开浏览器窗口，也知道为什么会发生这种情况

【问题讨论】：

应该是（dragend），还是（dragleave）事件？
@onik dragleave 检查元素是否离开浏览器隐藏 div 就像 facebook 你可以试试

标签： angular event-listener

【解决方案1】：

如果将项目悬停在displayDropZone元素上似乎会调用窗口拖动离开事件，因此需要在dragleave事件上添加条件

  @HostListener("window:dragleave", ["$event"])
  onDragLeave(e) {
    if (!e.fromElement) {  // this will ensure that you are not in the browser anymore
      console.log(" DRAG LEFT");
      this.displayDropZone = false;
    }
  }

【讨论】：