mouseenter/leave is fired from bubbled up mouse events happening on child-input-fields

[phofstetter@…]

A parent's mouseenter/mouseleave events are fired when the mouse moves over an <input> field somewhere in the child hierarchy.

This is contrary to the documentation which says that mouse(enter|leave) should only fire if the mouse enters/leaves the element the handler is attached to, but not any of its children.

I've created a reduced testcase on  http://jsfiddle.net/qs9f2/. The code is basically the same as the example code that was on the API documentation for mouseleave(). As you see, events are generated when you move your mouse over the <input>-element.

Seen in:

• Chrome (8 and 9)
• Safari 5.0.2

So it look as if this is primarely an issue with webkit browsers.

Expected results: When you move the muse over the input field, "enter" should appear one in the logging-div. When you move the mouse away from the input field, but stay inside the outer div, nothing should appear in the logging div

Actual results: When you move over the input field, "leave" is logged. When you move out of the input field, "enter" is logged.

[Philip Hofstetter <phofstetter@…>]

a bit of investigation has shown that in Webkit browsers, when the bogus event ist fired,

originalEvent.relatedTarget

is set to a <div> that's otherwise not part of the DOM but contains the input's value, so this must be some implementation specific internal div. Now to find out how we can detect that this otherwise completely detached div is actually a child of the parent where mouseleave is attached to.

[Philip Hofstetter <phofstetter@…>]

Here's a patch that fixes this issue:

 http://www.pilif.ch/safari-mouseenter.diff

I think it's save to treat an element that's not part of the DOM but still just got a mouse event fired on the same way as an element where reading its parentNode throws an exception.

[Philip Hofstetter <phofstetter@…>]

And for people in need of a client-side fix that doesn't require patching jQuery, at the beginning of your mouseenter or mouseleave handler, add

if (e.originalEvent.relatedTarget &&

e.originalEvent.relatedTarget !== document && !e.originalEvent.relatedTarget.parentNode) return;

to discard the bogus events in Webkit based browsers.

[Philip Hofstetter <phofstetter@…>]

                if (e.originalEvent.relatedTarget &&
                    e.originalEvent.relatedTarget !== document &&
                    !e.originalEvent.relatedTarget.parentNode)
                    return;

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a test case!

I tried this  cleaned version of your test case with Opera 10.63, FF 3.6.12, Safari 5.0.3, Chrome 8.0.552.215 and Chrome 9.0.597.10 (all on Windows)

The only one where I could reproduce an incorrect behavior was Chrome 9.0.597.10 which is a development version. All other browsers behave as expected. Triggering one "enter" when moving onto the div and one "leave" when moving of the div. No unwanted enter/leave messages are displayed when moving over/out the input.

So after trying hard I couldn't reproduce this bug.

[jitter]

I close this bug for now as we are unable to reproduce this except on a dev version of Chrome (you should file a bug there).

If you can provide a valid test case which reproduces the behavior please report back and request the reopening of the ticket.

[jitter]

Duplicate of #8209.

[Darth]

FYI -  http://trac.webkit.org/changeset/78077