jquery - javascript onmouseout applied to div fired by children

I'm having trouble finding a solution to this via google but I would have assumed it would be quite a mon problem. I have a div which I have applied an onmouseout event handler to (the handler is used to roll a menu up using jquerys "slideup" function, as I would like the menu to be hidden when the mouse leaves). Problem is that the child elements of that div also cause the handler to fire (I accept that this is by design due to the nature of the bubbling event model). Now what I would like to know is what is the best way to ignore these events that are triggered by the divs children and only roll the menu up when the mouse leaves the div the event is applied to.

Thanks

Share Improve this question asked Aug 15, 2009 at 3:30 Simon Fox 10.6k7 gold badges64 silver badges83 bronze badges

Thanks for all the quick replys, the accepted answer ended up being the best solution. – Simon Fox Commented Aug 15, 2009 at 5:26

Add a ment |

5 Answers 5

Sorted by: Reset to default 11

What you are looking for is mouseenter and mouseleave.

A good example can be found at this link (they have pared both mouseenter and mouseover)

http://docs.jquery./Events/mouseover

A blog entry

http://blogs.oracle./greimer/entry/mouse_over_out_versus_mouse

You might want to attempt cancelling the event bubbling or propagation. Quirksmode has a handy section explaining how to turn off bubbling or propagation in both the models.

Since JQuery presents the W3C standards to developers, you will not need to set the cancelbubble property. Calling stopPropagation() method will be enough.

Use the "mouseenter" and "mouseleave" on the parent div instead - the child elements will not effect the "mouseleave"

document.getElementById('Main_Menu_Container_Div').addEventListener('mouseenter',function(){
// do something like your 'slideup' or what ever you want.
});

"Event bubbling" as it is known, is the problem - "event on element2 takes precedence. This is called event bubbling". http://www.quirksmode/js/events_order.html

Use Example:

<style>
.Child_Div_Button{
    float:left;
    cursor:pointer;
    height:100px;
    width:100px;
    background-color:#CCC;
    border:#000 thin solid;
    margin:2px;
    padding:2px;
}


.Child_Div_Button:hover{
    background-color:#FFF;
}
</style>
</head>
<body>

<div id="Parent_Div_Container" style="height:300px; width:300px; border:#333 thin solid; background-color:#D2FFFF;">
Parent Div
<div id="button_container"> 
        <div class="Child_Div_Button">
        Button 1 Child Div
        </div>

        <div class="Child_Div_Button">
        Button 2 Child Div
        </div>
    </div>

</div>


<script type="text/javascript">

      document.getElementById('button_container').style.display = 'none';// initiate

        document.getElementById('Parent_Div_Container').addEventListener('mouseenter',function(){
            document.getElementById('button_container').style.display = 'block';
        });
        document.getElementById('Parent_Div_Container').addEventListener('mouseleave',function(){
            document.getElementById('button_container').style.display = 'none';
        });



</script>

Seems to work in latest Firefox WITHOUT the need for JQUERY - But Chrome, IE and Safari, all seem to need the jquery library for this to work. Is that to say that mozila now fully supports the use of mouseenter and mouseleave?!?! If so .. YAY! for the browser that actually does things to help developers : )

Simon you can check who has trigged the event using jquery Event.target property.

No, it's not by design, you've accidentally applied your 'onmouseout' to too many divs. You only want to apply it to one.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - javascript onmouseout applied to div fired by children - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)