HTML5 DragNDrop - Drop 事件永远不会触发

Question

I'm trying to implement a drag'n'drop upload input for a web app. Detecting drag start and end and appropriate drop target styling works flawlessly, though as soon as I drop an image file on the target, it opens in the browser. I know this has been asked pretty often on Stack Overflow, but I couldn't find a solution anywhere yet.

What I do see is: Listeners for dragenter , dragstart and dragend fire correctly, while drop does not. Please see the code below:

(Note: The app object is just a simple, custom abstraction object, nothing special about it. The app.on method calls addEventListener and attaches the event wrapped in a try-catch block.)

Attaching the events

app.on('drag dragover dragstart', app.elements.pictureDropArea, app.events.startedDragging, true);
app.on('dragenter', app.elements.pictureDropArea, app.events.isDragging);
app.on('dragleave dragend', app.elements.pictureDropArea, app.events.stoppedDragging);
app.on('drop', app.elements.pictureDropArea, app.events.isDropped);

The individual events

app.events.startedDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

app.events.isDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  app.elements.pictureDropArea.classList.add('dragged-over');
  return false;
};

app.events.stoppedDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  app.elements.pictureDropArea.classList.remove('dragged-over');
  return false;
};

app.events.isDropped = function(event) {
  event.preventDefault();
  event.stopPropagation();
  console.log('drop event fired.');

  var file = event.dataTransfer.files[ 0 ];

  console.log(file);
  return false;
};

Answer 1

Found it accidentally when I applied the same events to the body . It seems like there needs to a listener for dragover on the document body with the usual preventDefault and stopPropagation stuff:

app.on('dragover', document.body, function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
});

God, I hate this API so much...