title: How to stop redirecting after `drop` event?
body: <p>After dropping a file into a <code>div</code> in Firefox, the webpage will be redirected to this file. I tried to stop this propagation using jQuery's <code>e.preventDefault()</code> in <code>drop</code> handler, and failed.</p>
  
  <p>See <a href="http://jsfiddle.net/mKtn2/3/" rel="noreferrer">this demo</a>, dropping a file into <code>#test</code> won't redirect the webpage, but dropping into <code>#test1</code> will, I want to know why. Should I always bind handlers to <code>dragenter</code>, <code>dragover</code>, <code>dragleave</code> and <code>drop</code> to prevent propagation after <code>drop</code>?</p>
  
  <p>update:</p>
  
  <p>I found some tips on <a href="http://html5doctor.com/native-drag-and-drop/" rel="noreferrer">html5doctor</a>: </p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>And Mozilla <a href="https://developer.mozilla.org/En/DragDrop/Drag_Operations#Specifying_Drop_Targets" rel="noreferrer">claims</a>:</p>
  
  <blockquote>
    <p>A listener for the <code>dragenter</code> and <code>dragover</code> events are used to
    indicate valid drop targets, that is, places where dragged items may
    be dropped.</p>
  </blockquote>
  
  <p>But I test <a href="http://jsfiddle.net/mKtn2/7/" rel="noreferrer">this demo</a> on firefox, <code>#test</code> works and <code>#test1</code> doesn't, seems Mozilla made a mistake, and html5doctor is right: Firefox needs <code>dragover</code> only to make <code>drop</code> work.</p>