javascript - Internet Explorer leaks click event after adding an overlay in a jQuery mousedown handler -

in mousedown event-handler of div new div created , appended body.
new div has position:fixed (can position:absolute) , has 100% width , 100% height. therefore covers source div triggered mouse down event. latest google chrome (v30), latest firefox (v24), opera v12.16 , older safari v5.1.1 (on windows) after mousedown event no click event gets fired on event listener attached body.
only internet explorer (both 9 , 10) does fire click event on body afterwards! why? , how can prevented? bug in ie?

the html:

<div class="clickme">click me</div> 

the css:

.clickme {     background-color: #bbb; }  .overlay {     position: fixed; /* or absolute */     left: 0;     top: 0;     height: 100%;     width: 100%;     background-color: #000; } 

the javascript:

$(document).on('click', function(event) {     console.log('body click'); });  $('.clickme').on('mousedown', function(event) {     console.log('div mousedown');      var mask = $('<div></div>');     mask.attr('class', 'overlay');     mask.appendto('body'); }); 

here example additional comments: http://jsfiddle.net/fh4sk/5/

after clicking "click me" div, only

div mousedown 

should written console, in internet explorer is

div mousedown body click 

i appreciate help! thanks!

edit 1:

i found resources describing conditions when trigger click event:

http://www.quirksmode.org/dom/events/click.html:
"click - fires when mousedown , mouseup event occur on same element."

http://www.w3.org/tr/dom-level-3-events/#events-mouseevent-event-order
"...in general should fire click , dblclick events when event target of associated mousedown , mouseup events same element no mouseout or mouseleave events intervening, , should fire click , dblclick events on nearest common ancestor when event targets of associated mousedown , mouseup events different."

i'm not 100% sure "correct" behaviour should (maybe ie browser handles right?). last sentence, seems correct fire click event on body, because body "nearest common ancestor" of both div elements. there other statements on referenced w3.org page above, describe behaviour if element gets removed, again i'm not sure if applies here, no element gets removed, covered other element.

edit 2:

@evan opened bug report asking microsoft drop described behaviour: https://connect.microsoft.com/ie/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different

edit 3:

in addition internet explorer, google chrome started have same behaviour: https://code.google.com/p/chromium/issues/detail?id=484655

i bumped issue too. decided i'd make jquery plugin solve issue , put on github.

it's here, feedback welcome : https://github.com/louisameline/xclick

@mkurz : finding w3 directive, saved me lot of time. @vitalets : solved issue because use select2 (you led me topic). i'll fork select2 repo , leave message people interested in this.

i'll see if can ask microsoft people take @ , change annoying click behavior.