Загрузка файлов с помощью Drag and drop, как разово отследить когда курсор с файлом пересекает границу окна браузера?

Question

[djok2142]

Добрый день.
Подскажите пожалуйста. При перетаскивании файла в браузер, так званный "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 там минифицирован, и я не смог разобраться как реализован механизм, отсекающий все остальные срабатывания данных событий.

Answer 1

[djok2142]

var is_file_drag = false; // Если курсор с файлом находится в пределах окна браузер тогда true иначе false
var file_drag_target = false; // Элемент над которым в данный момент находится курсор с файлом

$('body').on('dragenter', function(e) {
  file_drag_target = e.target;
  if( is_file_drag ) return;
  is_file_drag = true;

  // Данный код будет выполнен когда курсор с файлом войдет в пределы окна браузера
  // .....
});

$('body').on('dragleave', function(e){
  if( e.target == file_drag_target) { // Если true, значит курсор с файлом покинул окно браузера, а не перешел на другой элемент
    is_file_drag = false;
      
    // Данный код будет выполнен когда курсор с файлом покинет пределы окна браузера
    // .....
  }
});

Answer 2

[Stalker_RED]

Событие от вложенных элементов всплывает же.

document.body.addEventListener('dragenter', function(e) {
  console.log('Старт перетаскивания', e.target);
});

Можете проверять где именно оно было сгенерировано.
if (e.taget.matches('body')) { }

Comments

[djok2142]

Данный способ не работает.
e.taget всегда равен тому элементу на который наведен курсор, и никогда не равняется body, то есть "всплытия" не происходит.

[Stalker_RED]

буллшит.
event.target равен не тому элементу над которым курсор, а тому в котором произошло событие. В данном случае событие dragenter.
И всплытие происходит, у вас же один listener, а не на каждом элементе. И он слышит события от вложенных элементов, события которые всплыли.

Вероятно вам и не нужно событие на body, вам нужно просто первое событие данного типа.

[djok2142]

В принципе вы правы, нужно отслеживать события у вложенных элементов, и сохранять над каким в данный момент находится курсор. Тем самым можно будет понять, курсор покинул окно браузера или перешел на другой элемент.

var is_file_drag = false; // Если курсор с файлом находится в пределах окна браузер тогда true иначе false
var file_drag_target = false; // Элемент над которым в данный момент находится курсор с файлом

$('body').on('dragenter', function(e) {
	file_drag_target = e.target;
	if( is_file_drag ) return;
	is_file_drag = true;

	// Данный код будет выполнен когда курсор с файлом войдет в пределы окна браузера
	// .....
});

$('body').on('dragleave', function(e){
	if( e.target == file_drag_target) { // Если true, значит курсор с файлом покинул окно браузера, а не перешел на другой элемент
		is_file_drag = false;
			
		// Данный код будет выполнен когда курсор с файлом покинет пределы окна браузера
		// .....
	}
});