Событие отбрасывания HTML5 не работает, если не обработан dragover

Question

Я слушаю событие drop и делаю e.preventDefault() Но он пытается открыть удаленный файл. До вчерашнего дня все работало нормально. Но только сегодня это сломалось по неизвестной причине. Я сделал JsFiddle#bwquR/10, чтобы отразить то же самое.

Edit:

Похоже, что если вы не примете событие dragover, 1011 * не может быть обработано. даже в скрипке Если вы прокомментируете dragover, это не сработает.
В реальной работе я пропустил написание dragover Но все равно вопрос drop не будет работать без dragover

Скрипка действительно работала, но тело было таким маленьким (только текст DROP там). drop происходило только в той маленькой области, где текст DROP лежит не на всем теле. Поэтому я подумал, что это не работает. извините за путаницу.

Answer 1

Полагаю, это потому, что без обработчика события dragOver используется обработчик события по умолчанию для события dragOver, поэтому после этого событие сброса не вызывается.Необходимо использовать e.preventDefault для события dragOver перед событием drop.

Answer 2

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Если вы хотите разрешить удаление, вы должны предотвратить обработку по умолчанию, отменив событие. Вы можете сделать это, либо возвратив false из определяемого атрибутом прослушивателя событий, либо вызвав метод event.preventDefault события. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Вызов метода protectDefault во время событий dragenter и dragover укажет, что в этом месте разрешено удаление. Однако обычно вы хотите вызывать метод protectDefault только в определенных ситуациях, например, только при перетаскивании ссылки. Для этого вызовите функцию, которая проверяет условие и отменяет событие только при выполнении условия. Если условие не выполнено, не отменяйте событие, и там не произойдет сброс, если пользователь отпустит кнопку мыши.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

Answer 3

Я не уверен, правильно ли я понимаю вашу проблему, но если вы хотите прочитать отброшенные файлы, вам нужно обработать событие dragover и поместить по крайней мере эту строку кода:

evt.dataTransfer.dropEffect = 'copy';

, иначе dropEffect - этопо умолчанию null, и вы не получите никаких данных.

Answer 4

Работает нормально для меня. Вы загружаете это как HTTP или ФАЙЛ URL? Я считаю, что это должен быть HTTP-URL с Chrome.