Hover() event firing mouseleave/mouseout when over child input element in Chrome 9.x.

[Tloram]

Hi all.

When using the hover() event in Chrome 9.x (was working fine in Chrome 8.x and is working fine in all other browsers), the mouseleave/mouseout event is fired incorrectly if you happen to mouseover a child input element.

This has also been reported on the Chrome forums here: ​http://www.google.com/support/forum/p/Chrome/thread?tid=24221a38e68900e8&hl=en

Nobody seems to know if it is a jQuery or Chrome bug.

T

[anonymous]

Additionally... this is ONLY a problem with the hover() event. If you add the events separately via mouseover() and mouseout() bindings... everything works as expected.

So this seems to suggest it IS a problem with jQuery and not Chrome.

[anonymous]

Ahh... but if you manually add the events separately via mouseenter() and mouseleave() bindings... the bug returns. Doh.

[anonymous]

Hi all,

I have found a way to work around this for the time being, inside your mouseenter/mouseleave events, add this check:

if(event.target == this) { YOUR LOGIC HERE }

This will only trigger the logic within your hover state if the element that triggered the event is the same one that has the event registered to it. So in this case, when the mouse pointer moves over the child input element in Chrome 9.x, the event is still triggered(incorrectly)... but because your logic resides within this additional if statement... nothing will happen.

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a test case (​http://jsfiddle.net/LtDan__/JwKP8/).

After checking your report I took the time and had a look at this and came up with the following:

• works in Chrome 8.X
• doesn't work in Chrome 9.X-stable and 10.X-dev
• works if you manually attach to mouseover/mouseout ​test case no jQuery
• doesn't work with .hover() ​jQuery test case
• both test cases work in all other browsers

This already gives a good indication that this is a regression in Chrome. So what is actually happening? When moving from the div to the input field Chrome fires a mouseout event where the relatedTarget property is set to some "internal detached div" instead of the actual input element.

So this is definitely a bug in Chrome as it sets relatedTarget to an element that shouldn't be accessible to user code. It has already been reported here ​http://code.google.com/p/chromium/issues/detail?id=68629 over a month ago, but there was no action taken and now this bug made it into a stable release.

So although this is a bug in Chrome, I will fix this in jQuery as it's easy enough to workaround this (because we already check for a similar bug with FF).

But again: This is a bug in Chrome. Go on and comment on the ticket linked to above and urge them to fix it.

[jitter]

#6329 is a duplicate of this ticket.

[jitter]

#7729 is a duplicate of this ticket.

[Anton M]

Make sure that mousing over Chrome "internal div" elements results in no trigger of a mouseleave. Fixes #8209.

Changeset: 4a828c93d40eb67b2041b08bbed0f1973442bd03

[Anton M]

Make sure that mousing over Chrome "internal div" doesn't trigger a mouseleave. Fixes #8209.

Follow up to ​https://github.com/jquery/jquery/commit/4a828c93d40eb67b2041b08bbed0f1973442bd03 which was stupid and got reversed.

Changeset: b46dff39c35ae05f92f6909ff8d07aa470e4a8d4

[anonymous]

FYI - ​http://trac.webkit.org/changeset/78077 Fixes the issue

[jitter]

#8286 is a duplicate of this ticket.

[anonymous]

Does not appear to be fixed in 1.5.1 release, hovering over input in child still fires the mouseleave.

[jorge.manrubia@…]

Confirmed that it this bug doesn't seem to be fixed in 1.5.1

Replying to anonymous:

Does not appear to be fixed in 1.5.1 release, hovering over input in child still fires the mouseleave.

[anonymous]

Hovering on textarea also fires the mouse leave in the version 1.4.3. I haven't tested it in 1.5

[anonymous]

that if(event.target == this) { YOUR LOGIC HERE } workaround doesn't exactly work..

[anonymous]

This has NOT been fixed in 1.5.1. Hovering the mouse over a textbox inside the mouseenter area still fires the mouseleave.

[anonymous]

I can confirm this hasn't been fixed still

[joey.rabbitt@…]

Replying to anonymous:

I can confirm this hasn't been fixed still

GETTING SAME PROBLEM

[anonymous]

not fixed in 1.5.1

[netZw3rg]

Just for info: The problems seems to fixed in version 10.x of chrome. I installed it minutes ago and can not reproduce this bug.

[Leonardo]

the problem still happens in 1.5.1

[anonymous]

issue is still present in Chrome 10.0x as of jQuery 1.5.2

[Rick Waldron]

Those of you that have reported this issue still existing, please confirm this test case:

​http://jsfiddle.net/rwaldron/wduJd/

[anonymous]

Replying to rwaldron:

Those of you that have reported this issue still existing, please confirm this test case:

​http://jsfiddle.net/rwaldron/wduJd/

Works for me.

[anonymous]

This does fail if you use mouseover and mouseout. Hovering over the text box makes the div disappear in Chrome 10.

​http://jsfiddle.net/NeF64/

May be the source of confusion as to the status of this bug.

[anonymous]

Replying to jaudourg:

• Status changed from reopened to closed comparateur forfaitportabilite du numero

This is not fixed as of the latest JQuery 1.7.1, and the latest Windows Chrome 17.0.963.79. Not sure why this was closed since you didn't give a reason.

[anonymous]

mouseleave() is incorrectly triggered when I leave an input (type=text) that is inside the div. Not good.