CODEWITHSUNDEEP
angulartypescripteventspreventdefaultangular11
ScrLurker
ScrLurker

Reputation: 3

Angular HostListener preventDefault not working

I'm trying to create a file drag and drop upload. I've created the div container with the dragenter, dragleave and drop events with HostListener in an Angular Directive. The dragenter and the dragleave event are working, but in the drop event the event.preventDefault() is not working. My event code:

@HostListener('drop', ['$event']) onDrop = (event): void => {
    event.preventDefault();
}

I also tried to add the event with (drop)="function($event)" inside the HTML DOM but that didn't work either.

Upvotes: 0

Views: 1932

Answers (1)

Nave Tseva
Nave Tseva

Reputation: 401

From MDN website:

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

So Try use event.stopPropagation() or event.stopImmediatePropagation() instead.

Upvotes: 0

Related Questions