Javascript MouseOverMouseOut children events - Stack Overflow

admin管理员组

文章数量:1291043

I have an element with some child elements. When the mouse leaves the parent element I want to hide the parent and it's children. Problem I'm having is that when I hover over any of the children, the mouseout event is being fired. What's the best way to prevent this? I really only want the event to fire when the mouse is not within the parent or any of it's children.

I have an element with some child elements. When the mouse leaves the parent element I want to hide the parent and it's children. Problem I'm having is that when I hover over any of the children, the mouseout event is being fired. What's the best way to prevent this? I really only want the event to fire when the mouse is not within the parent or any of it's children.

• javascript
• events
• mouseover
• children
• mouseleave

Share Improve this question Follow edited Feb 8, 2010 at 4:11 Matt asked Feb 8, 2010 at 3:55 MattMatt 6,4221010 gold badges5757 silver badges8484 bronze badges 3

• 2 I think you mean you're having a problem with mouseover/mouseout. mouseenter and mouseleave are specifically designed to not function the way you describe. – Crescent Fresh Commented Feb 8, 2010 at 4:09
• Yup, my bad. I mean mouseover / mouseout – Matt Commented Feb 8, 2010 at 4:11
• This very similar to this question Onmouseover child div problem and event bubbling which I answered – meouw Commented Feb 8, 2010 at 9:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The event is bubbling up from the child to the parent (where it is being caught)

You should catch the event on the children by adding a listener and making the propagation stop there.

This code will stop the event from bubbling up to the parents handler

function onMouseLeave(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

question: The mouse off event is fired by the parent, when it should not. Mouseing over the child should not trigger a mouse off from the parent. How can we stop this?

You only need a mouseout handler attached to the parent element. But...

You need to check that the parent is actually the target of the mouseout event, as opposed to the event bubbling up from one of the children. Check event.target (W3C) and event.srcElement (IE).

You also need to check that the element that the mouse will be entering is not a descendant of the parent. Check event.relatedTarget (W3C) and event.toElement (IE).

From http://api.jquery./mouseover/:

mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

and the same goes for mouseout vs mouseleave

本文标签： Javascript MouseOverMouseOut children eventsStack Overflow