CODEWITHSUNDEEP
javascriptangularevent-handlingdom-events
Daniel Stephens
Daniel Stephens

Reputation: 3239

Angular drop and focus events are triggered both

I am using Angular 10 and registered a drop event on my AppComponent.

The same component also has a focus event, and when dragging a directory onto the BrowserWindow, both events are triggered.

Is there any way to distinguish exclusively a drop or a focus event?

@HostListener("window:focus", ["$event"])
onFocus(event: any): void {
    console.log("window:focus");
}

@HostListener("drop", ["$event"])
onDrop($event: any) {
    console.log("drop");
}

Output:

focus <-- 1: shouldn't happen on drop
focus <-- 2: shouldn't happen on drop
drop

Any help is highly appreciated!

Upvotes: 0

Views: 90

Answers (1)

Janitha Rasanga
Janitha Rasanga

Reputation: 1126

Try this

focusDet: boolean = false;

...

@HostListener("drop", ["$event"])
onDrop($event: any) {
    this.focusDet = true;
    console.log("drop");
}

@HostListener("window:focus", ["$event"])
onFocus(event: any): void {
    if(!this.focusDet){
      console.log("window:focus");            
    }
}

Upvotes: 1

Related Questions