Добрый день.
Подскажите пожалуйста. При перетаскивании файла в браузер, так званный "Drag and drop", как
разово отследить события когда курсор мыши с файлом пересекает границу окна браузера, а так же событие когда курсор мыши с файлом покидает границы браузера (пользователь передумал, загружать файл)?
Пробовал отслеживать события dragenter и dragleave;
$("body").on('dragenter', function(e) {
console.log('Старт перетаскивания');
});
$(document).on('dragleave', function(e) {
console.log('Окончание перетаскивания');
});
Однако они срабатывают
многократно, пока курсор мыши движется по сайту пересекает границы вложенных в body элементов.
Как в данном случае быть?
Нужный вариант реализации встречал например на сайте
https://ru.imgbb.com/, там при перетаскивании файла в окно браузера единожды срабатывает событие "dragenter", и пока водишь по сайту курсором с файлом он более не срабатывает, и так же когда курсор покидает окно браузера, единожды срабатывает событие "dragleave".
Но к сожалению js там минифицирован, и я не смог разобраться как реализован механизм, отсекающий все остальные срабатывания данных событий.