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

admin管理员组

文章数量:1026989

In a mousedown event-handler of a div another new div is created and appended to the body.
This new div has position:fixed (can also be position:absolute) 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 no click event gets fired on an event listener attached to the body.
Only Internet Explorer (both 9 and 10) does fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a 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 is a the example with some additional ments: /

After clicking the "Click me" div, only

div mousedown

should be written to the console, but in Internet Explorer it actually is

div mousedown
body click

I appreciate any help!

EDIT 1:

I found some resources describing the conditions when to trigger a click event:

.html:
"click - Fires when a mousedown and mouseup event occur on the same element."

"...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 mon ancestor when the event targets of the associated mousedown and mouseup events are different."

I'm not 100% sure what the "correct" 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 "nearest mon ancestor" of both div elements. There are some other statements on the referenced w3 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.

EDIT 2:

@Evan opened a bug report asking Microsoft to drop the described behaviour:

EDIT 3:

In addition to Internet Explorer, Google Chrome recently started to have the same behaviour:

In a mousedown event-handler of a div another new div is created and appended to the body.
This new div has position:fixed (can also be position:absolute) 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 no click event gets fired on an event listener attached to the body.
Only Internet Explorer (both 9 and 10) does fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a 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 is a the example with some additional ments: http://jsfiddle/Fh4sK/5/

After clicking the "Click me" div, only

div mousedown

should be written to the console, but in Internet Explorer it actually is

div mousedown
body click

I appreciate any help!

EDIT 1:

I found some resources describing the conditions when to trigger a click event:

http://www.quirksmode/dom/events/click.html:
"click - Fires when a mousedown and mouseup event occur on the same element."

http://www.w3/TR/DOM-Level-3-Events/#events-mouseevent-event-order
"...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 mon ancestor when the event targets of the associated mousedown and mouseup events are different."

I'm not 100% sure what the "correct" 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 "nearest mon ancestor" of both div elements. There are some other statements on the referenced w3 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.

EDIT 2:

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

EDIT 3:

In addition to Internet Explorer, Google Chrome recently started to have the same behaviour: https://code.google./p/chromium/issues/detail?id=484655

• javascript
• jquery
• dom
• internet-explorer
• jquery-events

Share Improve this question Follow edited Apr 22, 2022 at 18:02 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 7, 2013 at 0:08 mkurzmkurz 2,82611 gold badge2525 silver badges4242 bronze badges 4

• @RPM what do you mean by it? – Mr_Green Commented Oct 7, 2013 at 1:55
• The devious thing about this pickle is that the IE way of handling it is actually more intuitive – Lloyd Banks Commented Oct 7, 2013 at 3:38
• @LloydBanks, actually I'm not 100% sure what the "correct" behaviour should be. My assumption is that because a new layer gets added in the mousedown event-handler (which covers the original click-source-element), it seems that all browsers, except IE, assume, that this isn't a click on the body or the "clickme"-div anymore, because the element underneath the mouse pointer changed. – mkurz Commented Oct 7, 2013 at 11:12
• Perhaps there is a better way to achieve what you are trying to do. Can you give a broader explanation of the UI you are trying to create? Why do you need the click handler on the whole document? Does the document click event need to remain once you have opened the overlay? – rojoca Commented Oct 7, 2013 at 23:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I bumped into this issue too. I decided I'd make a jQuery plugin to solve this issue and put it on GitHub.

It's all here, feedback is wele : https://github./louisameline/XClick

@mkurz : thanks for finding that W3 directive, you saved me a lot of time. @vitalets : I solved this issue because I use select2 like you (you led me to this topic). I'll fork the select2 repo and leave a message for the people interested in this.

I'll see if I can ask the Microsoft people to take a look at it and hopefully change that annoying click behavior.

I also struggled with such behavior. I've modified your fiddle to find out how all mouse events are triggered with dynamically created overlay:

http://jsfiddle/Fh4sK/9/

So, when mousedown handler of some element shows overlay on the same place where mousedown occured:
Chrome, FF:

1. mousedown triggered on element
2. mouseup triggered on overlay
3. click does not trigger

IE:

1. mousedown triggered on element
2. mouseup triggered on overlay
3. click triggered on BODY(!)

The same behavior if you hide mask in mousedown.

This issue can lead to weird things in IE with modals, masks, overlays etc..

Intresting thing: if you show overlay in mouseup instead of mousedown - everything works

The solution I found is to use mouseup instead of mousedown.
It can't be explained normally because both these events are triggered before click.
In that case all mouse events are triggered on element:

http://jsfiddle/Fh4sK/11/

1. mousedown triggered on element
2. mouseup triggered on element
3. click triggered on element

Hope this helps.

You could filter the document click by the target to exclude clicks on that div:

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

If you want to stop bubbling of the click event, try this : (I don't 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 differents events, independant. here is a similar question

In a mousedown event-handler of a div another new div is created and appended to the body.
This new div has position:fixed (can also be position:absolute) 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 no click event gets fired on an event listener attached to the body.
Only Internet Explorer (both 9 and 10) does fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a 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 is a the example with some additional ments: /

After clicking the "Click me" div, only

div mousedown

should be written to the console, but in Internet Explorer it actually is

div mousedown
body click

I appreciate any help!

EDIT 1:

I found some resources describing the conditions when to trigger a click event:

.html:
"click - Fires when a mousedown and mouseup event occur on the same element."

"...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 mon ancestor when the event targets of the associated mousedown and mouseup events are different."

I'm not 100% sure what the "correct" 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 "nearest mon ancestor" of both div elements. There are some other statements on the referenced w3 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.

EDIT 2:

@Evan opened a bug report asking Microsoft to drop the described behaviour:

EDIT 3:

In addition to Internet Explorer, Google Chrome recently started to have the same behaviour:

In a mousedown event-handler of a div another new div is created and appended to the body.
This new div has position:fixed (can also be position:absolute) 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 no click event gets fired on an event listener attached to the body.
Only Internet Explorer (both 9 and 10) does fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a 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 is a the example with some additional ments: http://jsfiddle/Fh4sK/5/

After clicking the "Click me" div, only

div mousedown

should be written to the console, but in Internet Explorer it actually is

div mousedown
body click

I appreciate any help!

EDIT 1:

I found some resources describing the conditions when to trigger a click event:

http://www.quirksmode/dom/events/click.html:
"click - Fires when a mousedown and mouseup event occur on the same element."

http://www.w3/TR/DOM-Level-3-Events/#events-mouseevent-event-order
"...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 mon ancestor when the event targets of the associated mousedown and mouseup events are different."

I'm not 100% sure what the "correct" 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 "nearest mon ancestor" of both div elements. There are some other statements on the referenced w3 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.

EDIT 2:

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

EDIT 3:

In addition to Internet Explorer, Google Chrome recently started to have the same behaviour: https://code.google./p/chromium/issues/detail?id=484655

• javascript
• jquery
• dom
• internet-explorer
• jquery-events

Share Improve this question Follow edited Apr 22, 2022 at 18:02 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 7, 2013 at 0:08 mkurzmkurz 2,82611 gold badge2525 silver badges4242 bronze badges 4

• @RPM what do you mean by it? – Mr_Green Commented Oct 7, 2013 at 1:55
• The devious thing about this pickle is that the IE way of handling it is actually more intuitive – Lloyd Banks Commented Oct 7, 2013 at 3:38
• @LloydBanks, actually I'm not 100% sure what the "correct" behaviour should be. My assumption is that because a new layer gets added in the mousedown event-handler (which covers the original click-source-element), it seems that all browsers, except IE, assume, that this isn't a click on the body or the "clickme"-div anymore, because the element underneath the mouse pointer changed. – mkurz Commented Oct 7, 2013 at 11:12
• Perhaps there is a better way to achieve what you are trying to do. Can you give a broader explanation of the UI you are trying to create? Why do you need the click handler on the whole document? Does the document click event need to remain once you have opened the overlay? – rojoca Commented Oct 7, 2013 at 23:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I bumped into this issue too. I decided I'd make a jQuery plugin to solve this issue and put it on GitHub.

It's all here, feedback is wele : https://github./louisameline/XClick

@mkurz : thanks for finding that W3 directive, you saved me a lot of time. @vitalets : I solved this issue because I use select2 like you (you led me to this topic). I'll fork the select2 repo and leave a message for the people interested in this.

I'll see if I can ask the Microsoft people to take a look at it and hopefully change that annoying click behavior.

I also struggled with such behavior. I've modified your fiddle to find out how all mouse events are triggered with dynamically created overlay:

http://jsfiddle/Fh4sK/9/

So, when mousedown handler of some element shows overlay on the same place where mousedown occured:
Chrome, FF:

1. mousedown triggered on element
2. mouseup triggered on overlay
3. click does not trigger

IE:

1. mousedown triggered on element
2. mouseup triggered on overlay
3. click triggered on BODY(!)

The same behavior if you hide mask in mousedown.

This issue can lead to weird things in IE with modals, masks, overlays etc..

Intresting thing: if you show overlay in mouseup instead of mousedown - everything works

The solution I found is to use mouseup instead of mousedown.
It can't be explained normally because both these events are triggered before click.
In that case all mouse events are triggered on element:

http://jsfiddle/Fh4sK/11/

1. mousedown triggered on element
2. mouseup triggered on element
3. click triggered on element

Hope this helps.

You could filter the document click by the target to exclude clicks on that div:

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

If you want to stop bubbling of the click event, try this : (I don't 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 differents events, independant. here is a similar question

本文标签：