title: Internet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
body: <p>In a <code>mousedown</code> event-handler of a div another new div is created and appended to the body.<br />
  This new div has <code>position:fixed</code> (can also be <code>position:absolute</code>) and has 100% width and 100% height. Therefore it immediately covers the source div which triggered the mouse down event.
  Now with the latest Google Chrome (v30), latest Firefox (v24), Opera v12.16 and even with a older Safari v5.1.1 (on Windows) after the mousedown event <strong>no</strong> click event gets fired on an event listener attached to the body.<br />
  <strong>Only</strong> Internet Explorer (both 9 and 10) <strong>does</strong> fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a bug in IE?</p>
  <p>The HTML:</p>
  <pre><code>&lt;div class=&quot;clickme&quot;&gt;Click me&lt;/div&gt;
  </code></pre>
  <p>The CSS:</p>
  <pre><code>.clickme {
      background-color: #BBB;
  }
  
  .overlay {
      position: fixed; /* or absolute */
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: #000;
  }
  </code></pre>
  <p>The JavaScript:</p>
  <pre><code>$(document).on('click', function(event) {
      console.log('body click');
  });
  
  $('.clickme').on('mousedown', function(event) {
      console.log('div mousedown');
      
      var mask = $('&lt;div&gt;&lt;/div&gt;');
      mask.attr('class', 'overlay');
      mask.appendTo('body');
  });
  </code></pre>
  <p>Here is a the example with some additional comments: <a href="http://jsfiddle.net/Fh4sK/5/" rel="nofollow noreferrer">http://jsfiddle.net/Fh4sK/5/</a></p>
  <p>After clicking the &quot;Click me&quot; div, only</p>
  <pre><code>div mousedown
  </code></pre>
  <p>should be written to the console, but in Internet Explorer it actually is</p>
  <pre><code>div mousedown
  body click
  </code></pre>
  <p>I appreciate any help!</p>
  <p><strong>EDIT 1:</strong></p>
  <p>I found some resources describing the conditions when to trigger a click event:</p>
  <blockquote>
  <p><a href="http://www.quirksmode.org/dom/events/click.html" rel="nofollow noreferrer">http://www.quirksmode.org/dom/events/click.html</a>:<br />
  &quot;click - Fires when a mousedown and mouseup event occur on the same element.&quot;</p>
  <p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order" rel="nofollow noreferrer">http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order</a><br />
  &quot;...in general should fire click and dblclick events when the event target of the associated mousedown and mouseup events is the same element with no mouseout or mouseleave events intervening, and should fire click and dblclick events on the nearest common ancestor when the event targets of the associated mousedown and mouseup events are different.&quot;</p>
  </blockquote>
  <p>I'm not 100% sure what the &quot;correct&quot; behaviour now actually should be (maybe IE is the only browser which handles it right?). From the last sentence, it seems that it is correct to fire the click event on the body, because the body is the &quot;nearest common ancestor&quot; of both div elements. There are some other statements on the referenced w3.org page above, which describe the behaviour if an element gets removed, but again I'm not sure if this applies here, as no element gets removed, but covered by an other element.</p>
  <p><strong>EDIT 2:</strong></p>
  <p>@Evan opened a bug report asking Microsoft to drop the described behaviour: <a href="https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different" rel="nofollow noreferrer">https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different</a></p>
  <p><strong>EDIT 3:</strong></p>
  <p>In addition to Internet Explorer, Google Chrome recently started to have the same behaviour: <a href="https://code.google.com/p/chromium/issues/detail?id=484655" rel="nofollow noreferrer">https://code.google.com/p/chromium/issues/detail?id=484655</a></p>