Angular HostListener preventDefault не работает

Я пытаюсь создать загрузку перетаскиванием файлов. Я создал контейнер div с событиями dragenter, dragleave и drop с помощью HostListener в директиве Angular. Событие dragenter и dragleave работают, но в событии drop event.preventDefault() не работает. Мой код события:

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

Я также пытался добавить событие с (drop)="function($event)" в HTML DOM, но это тоже не сработало.


typescript events angular angular11 preventdefault
person ScrLurker    schedule 30.12.2020    source источник
comment
Что происходит такого, чего быть не должно? Вы уверены, что preventDefault остановит это поведение? Возможно, есть другое событие, которое срабатывает от drop.   -  person Explosion Pills    schedule 31.12.2020
comment
Извините забыл сказать. Когда я перетаскиваю изображение в контейнер div с событиями, оно откроет изображение в моем браузере (в chrome оно открывает новую вкладку, в firefox оно открывается на той же вкладке) или когда я перетаскиваю любой другой формат файла, который не поддерживается браузером он загрузит его. И нет другого события, по крайней мере, о котором я знаю, которое могло бы предотвратить это. Я только что создал этот угловой компонент, и в нем нет ничего, что могло бы этому помешать.   -  person ScrLurker    schedule 31.12.2020
comment
Этот вопрос может вам помочь: stackoverflow.com/questions/35274028/   -  person Gunnar B.    schedule 31.12.2020
comment
спасибо, но это тоже не помогло :( но событие определенно срабатывает, я проверил его на вводе типа файла. Но на самом div он все еще открывает изображение в моем браузере :/   -  person ScrLurker    schedule 31.12.2020
comment
Я создал новый угловой проект, удалил все в app.component.html, создал div <div id="dropZone" (drop)="dropZoneEvent($event)"></div> и код dropZoneEvent($event: DragEvent) {$event.preventDefault(); } и немного css для цвета фона и размера... все еще не работает... что я делаю неправильно ??? :(   -  person ScrLurker    schedule 31.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

С веб-сайта MDN:

Метод preventDefault() интерфейса Event сообщает пользовательскому агенту, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, как обычно. Событие продолжает распространяться как обычно, если только один из его обработчиков событий не вызовет stopPropagation() или stopImmediatePropagation(), любое из которых сразу прекращает распространение.

Поэтому попробуйте вместо этого использовать event.stopPropagation() или event.stopImmediatePropagation().

person Nave Tseva    schedule 30.12.2020
comment
Спасибо за ваш ответ, но, к сожалению, это тоже не работает. Я пробовал их все по отдельности и все вместе, но изображение все равно открывается. Могу ли я как-то проверить, срабатывает ли событие? В фаерфоксе конечно ничего не происходит потому что картинка открывается в той же вкладке, а в хроме? Изображение там открывается в новой вкладке, но я ничего не вижу в консоли, когда я что-то регистрирую в консоли....? :/ но так и должно быть, потому что dragenter и dragleave тоже работают нормально, и я таким же образом добавил событие перетаскивания... - person ScrLurker; 31.12.2020
comment
На самом деле понятия не имею, должно ли это вообще работать, но если я сделаю это в html-файле следующим образом: <div id="fileDropzone" (drop)="$event.preventDefault()" appEventDrag> это не сработает ни со всеми тремя (preventDefault, stopPropagation, stopImmediatePropagation). И элемент div не имеет дочерних элементов, так что это тоже не может быть причиной - person ScrLurker; 31.12.2020