@HostListener работает некорректно - PullRequest
Новая
       50

@HostListener работает некорректно

0 голосов
/ 28 мая 2020
• 1000 из него поместите ваши файлы сюда, и когда я выйду из окна браузера, я хочу, чтобы этот 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 продолжает отображаться и скрываться одновременно, а событие перетаскивания работает некорректно, потому что когда перетаскиваемый элемент все еще находится в окне браузера, он говорит ПЕРЕТАСКАНИЕ ВЛЕВО, я не знаю, почему это происходит, хотя я не выходил из окна браузера

1 Ответ

1 голос
/ 28 мая 2020

Кажется, что событие выхода из окна перетаскивания вызывается, если вы наводите курсор на элемент 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;
    }
  }
...