title: Event propagation, overlay and drag-and-drop events
body: <p>I want to overlay a div over the viewport when the user drags a file onto the window.</p>
  <p>However, I'm having trouble with the event propagation. When I set the overlay to <code>display: block</code> it appears to fire off a <code>dragleave</code> event and then another <code>dragenter</code> and then another <code>dragleave</code> again, so it's always in a post-dragleave state. Of course I call <code>e.stopPropagation()</code> and <code>e.preventDefault()</code> on the event object, but it doesn't seem to make a difference.</p>
  <p>The <code>console.log()</code> output when you drag something over the window:</p>
  <blockquote>
  <p>dragenter<br />
  dragenter<br />
  dragleave<br />
  dragenter<br />
  dragleave</p>
  </blockquote>
  <p>The css. <code>#overlay</code> is set to <code>display: none</code> by default, but will show if <code>body</code> has the <code>dragenter</code> class:</p>
  <pre><code>    body {
          position: absolute;
          height: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 0;
          padding: 0;
      }
  
      #overlay {
          position: absolute;        
          height: auto;
          width: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url(bg.png) repeat-x top right, url(bg.png) repeat-x bottom left, url(bg.png) repeat-y top right, url(bg.p
  ng) repeat-y bottom left;
          display: none;
      }
  
      body.dragenter #overlay {
          display: block;
      }
  </code></pre>
  <p>The JavaScript; add the 'dragenter' class on <code>dragenter</code> and removes it on <code>dragleave</code>:</p>
  <pre><code>$(document).on('dragenter', function (e) {
      e.stopPropagation();
      e.preventDefault();
      console.log('dragenter');
      $(document.body).addClass('dragenter');
  });
  
  $(document).on('dragleave', function (e) {
      e.stopPropagation();
      e.preventDefault();
      console.log('dragleave';
      $(document.body).removeClass('dragenter');
  });
  </code></pre>
  <p>The html:</p>
  <pre><code>&lt;body&gt;
  &lt;div id=&quot;overlay&quot;&gt;...&lt;/div&gt;
  ...    
  &lt;/body&gt;
  </code></pre>