Skip to main content

Bug Tracker

Side navigation

#8209 closed bug (fixed)

Opened February 08, 2011 11:30AM UTC

Closed February 08, 2011 04:02PM UTC

Last modified April 15, 2014 05:04AM UTC

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

Reported by: Tloram Owned by: browser-chrome
Priority: high Milestone: 1.5.1
Component: event Version: 1.5
Keywords: browserbug Cc: temp01
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (26)

Changed February 08, 2011 11:48AM UTC by anonymous comment:1

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.

Changed February 08, 2011 11:59AM UTC by anonymous comment:2

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

Changed February 08, 2011 01:22PM UTC by anonymous comment:3

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.

Changed February 08, 2011 03:37PM UTC by jitter comment:4

cc: → temp01
component: unfiledevent
keywords: → browserbug
milestone: 1.next1.5.1
owner: → browser-chrome
priority: undecidedhigh
status: newassigned

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.

Changed February 08, 2011 03:40PM UTC by jitter comment:5

#6329 is a duplicate of this ticket.

Changed February 08, 2011 03:41PM UTC by jitter comment:6

#7729 is a duplicate of this ticket.

Changed February 08, 2011 04:02PM UTC by Anton M comment:7

resolution: → fixed
status: assignedclosed

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

Changeset: 4a828c93d40eb67b2041b08bbed0f1973442bd03

Changed February 08, 2011 04:17PM UTC by Anton M comment:8

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

Changed February 09, 2011 09:13PM UTC by anonymous comment:9

Changed February 15, 2011 07:18PM UTC by jitter comment:10

#8286 is a duplicate of this ticket.

Changed February 25, 2011 06:05AM UTC by anonymous comment:11

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

Changed February 25, 2011 11:13PM UTC by jorge.manrubia@gmail.com comment:12

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

Replying to [comment:11 anonymous]:

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

Changed March 01, 2011 06:48PM UTC by anonymous comment:13

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

Changed March 03, 2011 01:32PM UTC by anonymous comment:14

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

Changed March 04, 2011 07:37PM UTC by anonymous comment:15

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

Changed March 04, 2011 10:39PM UTC by anonymous comment:16

I can confirm this hasn't been fixed still

Changed March 07, 2011 12:34PM UTC by joey.rabbitt@videogamer.com comment:17

Replying to [comment:16 anonymous]:

I can confirm this hasn't been fixed still

GETTING SAME PROBLEM

Changed March 07, 2011 04:31PM UTC by anonymous comment:18

not fixed in 1.5.1

Changed March 08, 2011 07:57PM UTC by netZw3rg comment:19

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.

Changed March 12, 2011 09:22PM UTC by Leonardo comment:20

the problem still happens in 1.5.1

Changed April 04, 2011 01:51PM UTC by anonymous comment:21

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

Changed April 04, 2011 02:01PM UTC by rwaldron comment:22

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

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

Changed April 04, 2011 06:43PM UTC by anonymous comment:23

Replying to [comment:22 rwaldron]:

Those of you that have reported this issue still existing, please confirm this test case: http://jsfiddle.net/rwaldron/wduJd/

Works for me.

Changed April 04, 2011 07:01PM UTC by anonymous comment:24

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.

Changed March 14, 2012 05:46PM UTC by anonymous comment:25

Replying to [comment:25 jaudourg]:

> #!html
>        <ul class="changes"><li>
>       <strong>Status</strong> changed from <em>reopened</em> to <em>closed</em>
>  <a style='color:white' href='http://le-meilleur-forfait.com/'>comparateur forfait</a><a style='color:white' href='http://portabilite.info'>portabilite du numero</a>
> </li></ul>
> 

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.

Changed April 15, 2014 05:04AM UTC by anonymous comment:26

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