Internet Explorer leak click event after adding overlay in jQuery mousedown handler

Question

In the mousedown event handler div, another new div is created and added to the body.
This new div has position:fixed(can also be position:absolute) and has 100% width and 100% height. Therefore, it immediately closes the original div that raises the mouse event. Now with the latest versions of Google Chrome (v30), the latest versions of Firefox (v24), Opera v12.16 and even with the older Safari v5.1.1 (on Windows) after the mousedown no event triggers the click event, an event listener attached to the body .
Only Internet Explorer (both 9 and 10) makes fire after the event of a click on the body afterwards! What for? And how can this be prevented? Is this actually a bug in IE?

HTML:

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

CSS:

.clickme {
    background-color: #BBB;
}

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

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');
});

: http://jsfiddle.net/Fh4sK/5/

"Click me",

div mousedown

, Internet Explorer

div mousedown
body click

! !

1:

, , click:

http://www.quirksmode.org/dom/events/click.html:
"click" - , mousedown mouseup.

http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order
"... dblclick, mousedown mouseup - mouseout mouseleave click dblclick , ".

100%, "" (, IE , ?). , click , " " div. w3.org , , , , , , .

2:

@Evan , Microsoft : https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different

3:

Internet Explorer, Google Chrome : https://code.google.com/p/chromium/issues/detail?id=484655

Answer 1

. jQuery GitHub.

, : https://github.com/louisameline/XClick

@mkurz: , W3, . @vitalets: , select2, ( ). select2 repo , .

, Microsoft , , .

Answer 2

. , , :

http://jsfiddle.net/Fh4sK/9/

, mousedown , mousedown:
Chrome, FF:

• mousedown
• mouseup
• click

IE:

• mousedown
• mouseup
• click BODY (!)

, mousedown.

IE , , ..

: mouseup mousedown -

, , mouseup mousedown.
, click.
:

http://jsfiddle.net/Fh4sK/11/

• mousedown
• mouseup
• click

, .

Answer 3

, div:

$(document).on('click', function(event) {
    if(!$(event.target).hasClass('clickme')) {
        console.log('body click');  
    }
});

Answer 4

If you want to stop the bubble click event, try the following: (I do not have IE to test)

$(document).on('click', function(event) {
    console.log('body click');
});

$('.clickme').on('mousedown', function(event) {
    console.log('div mousedown');
});

$('.clickme').on('click', function(event) {
  event.stopPropagation();
});

Click, mousedown and mouseup are separate events, independent. here is a similar question