Parent's mouseout is triggered when mouse enters parent from child

Question

I came across this problem when I found the solution to my question from earlier today (if interested, find it here).

I have a simple structure of divs:

<div id="outer">
    <div id="inner">
        <div id="content"></div>
        <div id="handle">HOVER HERE</div>
    </div>
</div>

There is a mouseout event registered to outer:

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

(You can see the entire working example here.)

This is the simple version of a menu which has slideDown/slideUp effects.

Now here's my problem:

I totally understand that the mouseout fires on entering a child element (that's the reason for the isChildOf check). What I don't understand is, that the event is fired when I move the mouse from content to outer (inner just centers the actual content while content is the sliding part and has the same width as inner.) This is why I added the check if the relatedTarget is the element itself.

For my understanding, there shouldn't be any mouseout events on the child(ren). However, during good old 'alert-debugging' it turned out that the event seems to fire if the mouse goes from content back to outer, and of course, the isChildOf check failed for outer itself (which is the relatedTarget).

I read about bubbling and capturing again, but I understand it that way, that it is only relevant if more than one eventhandler for a particular event is present.

I would appreciate any explanation or resource which helps understanding the reason for this.

score 1 · Accepted Answer · answered Dec 19 '13 at 21:50

1

You got this problem because of event bubbling. See your fiddle changed a little with colored borders.

When you move mouse out of content then mouseout event is fired (for leaving content). content doesn't take care of it so it bubbles to his parent which is inner and so on. mouseout event is cought only by outer handler.

See also jquery .mouseout(): This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

answered Dec 19 '13 at 21:50

Anto Jurković

11,188
2
29
42

Thank you very much for your answer! If I got it right, then events (I assume this is the same for all) are always triggered, but if no handlers are present, then they are just not caught? (By the element itself, it's possibly caught through bubbling.) – Dennis Dec 19 '13 at 22:00
Something like that. I don't know how event handling is done exactly in jquery. If you have possibility try to get a book from Nicholas Zakas _Professional JavaScript for Web Developers_ where he explains events and different event flows (event capturing and event bubbling). Most probably there are also some good articles about it. – Anto Jurković Dec 19 '13 at 22:16
Thanks again. I think your answer already clarified where the "problem" comes from. I'll try to get this book, sounds interesting. – Dennis Dec 19 '13 at 22:22

score 0 · Answer 2 · answered Dec 19 '13 at 20:51

0

This sounds like an issue with event bubbling. Something like event.stopPropagation() might help.

answered Dec 19 '13 at 20:51

devnill

2,043
4
21
31

Parent's mouseout is triggered when mouse enters parent from child

2 Answers2