Question

After dropping a file into a div in Firefox, the webpage will be redirected to this file. I tried to stop this propagation using jQuery’s e.preventDefault() in drop handler, and failed.

See this demo, dropping a file into #test won’t redirect the webpage, but dropping into #test1 will, I want to know why. Should I always bind handlers to dragenter, dragover, dragleave and drop to prevent propagation after drop?

update:

I found some tips on html5doctor:

To tell the browser we can drop in this element, all we have to do is
cancel the dragover event. However, since IE behaves differently, we
need to do the same thing for the dragenter event.

And Mozilla claims:

A listener for the dragenter and dragover events are used to
indicate valid drop targets, that is, places where dragged items may
be dropped.

But I test this demo on firefox, #test works and #test1 doesn’t, seems Mozilla made a mistake, and html5doctor is right: Firefox needs dragover only to make drop work.

Answer 1

The ondragover event needs to be canceled in Google Chrome and Safari to allow firing the ondrop event.