title: html5 file drag-n-drop event confusion
body: <h2>Overview</h2>
  
  <p>I want to attach an event to an element for handling file drag and drop events, but it seems like this event is also being attached to all the child elements. For example,</p>
  
  <pre><code>$('#dragtarget').on('dragenter', function() {
      console.log('dragenter');
  });
  </code></pre>
  
  <p>... if I drag files over any elements that are children of the <code>#dragtarget</code> element, the console will output <code>dragenter</code>. So if I attach this event to <code>document</code> or <code>window</code>, the event will fire when hovering over any element on the page.</p>
  
  <p>The same thing happens with <code>dragleave</code>, except when leaving child elements.</p>
  
  <h2>Question</h2>
  
  <p>Why is this happening? Is there away to attach this event to <strong>only</strong> the element intended? If not, is there a way to detach the event from all child elements?</p>
  
  <h2>jsFiddle</h2>
  
  <p>Here's an example fiddle to tinker with: <a href="http://jsfiddle.net/UnsungHero97/ePLV6/7/" rel="nofollow">http://jsfiddle.net/UnsungHero97/ePLV6/7/</a></p>
  
  <ul>
  <li><p>Notice how the border changes to solid when you drag files over the box, but back to dashed when hovering over the text</p></li>
  <li><p>I want the border to change to solid when dragging files over the box, no matter if I'm hovering over the text within the box</p></li>
  </ul>
  
  <p>Here's the code from the fiddle for just in case:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="dragtarget"&gt;
      &lt;span&gt;File over/out here&lt;/span&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;span&gt;more text here&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// I expect only the #dragtarget element to fire the 'dragenter' and 'dragleave' events,
  // not the child elements
  $('#dragtarget').on('dragenter', function() {
  
      $(this).css({borderStyle: 'solid'});
  
      event.stopPropagation();
      event.preventDefault();
      return false;
  
  }).on('dragleave', function() {
  
      $(this).css({borderStyle: 'dashed'});
  
      event.stopPropagation();
      event.preventDefault();
      return false;
  });
  </code></pre>