Bug Tracker

Ticket #8209 (closed bug: fixed)

Opened 4 years ago

Last modified 8 months ago

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
Blocking: Blocked by:

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

Change History

comment:1 in reply to: ↑ description Changed 4 years ago by 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.

comment:2 Changed 4 years ago by anonymous

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

comment:3 Changed 4 years ago by 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.

comment:4 Changed 4 years ago by jitter

  • Status changed from new to assigned
  • Cc temp01 added
  • Component changed from unfiled to event
  • Priority changed from undecided to high
  • Owner set to browser-chrome
  • Milestone changed from 1.next to 1.5.1
  • Keywords browserbug added

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.

comment:5 Changed 4 years ago by jitter

#6329 is a duplicate of this ticket.

comment:6 Changed 4 years ago by jitter

#7729 is a duplicate of this ticket.

comment:7 Changed 4 years ago by Anton M

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: 4a828c93d40eb67b2041b08bbed0f1973442bd03

comment:8 Changed 4 years ago by 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

comment:9 Changed 4 years ago by anonymous

comment:10 Changed 4 years ago by jitter

#8286 is a duplicate of this ticket.

comment:11 follow-up: ↓ 12 Changed 4 years ago by anonymous

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

comment:12 in reply to: ↑ 11 Changed 4 years ago by 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.

comment:13 Changed 4 years ago by anonymous

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

comment:14 Changed 4 years ago by anonymous

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

comment:15 Changed 4 years ago by anonymous

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

comment:16 follow-up: ↓ 17 Changed 4 years ago by anonymous

I can confirm this hasn't been fixed still

comment:17 in reply to: ↑ 16 Changed 4 years ago by joey.rabbitt@…

Replying to anonymous:

I can confirm this hasn't been fixed still

GETTING SAME PROBLEM

comment:18 Changed 4 years ago by anonymous

not fixed in 1.5.1

comment:19 Changed 4 years ago by 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.

comment:20 Changed 4 years ago by Leonardo

the problem still happens in 1.5.1

comment:21 Changed 4 years ago by anonymous

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

comment:22 follow-up: ↓ 23 Changed 4 years ago by rwaldron

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

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

comment:23 in reply to: ↑ 22 ; follow-up: ↓ 24 Changed 4 years ago by 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.

comment:24 in reply to: ↑ 23 Changed 4 years ago by 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.

comment:26 in reply to: ↑ 25 Changed 3 years ago by anonymous

Replying to jaudourg:

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.

comment:27 Changed 8 months ago by anonymous

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

Note: See TracTickets for help on using tickets.