CODEWITHSUNDEEP
javascriptjqueryhtmlevents
Simon Fox
Simon Fox

Reputation: 10561

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 common 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

Upvotes: 6

Views: 6090

Answers (5)

user1502852
user1502852

Reputation:

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.org/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 : )

Upvotes: 1

Alec Smart
Alec Smart

Reputation: 95880

What you are looking for is mouseenter and mouseleave.

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

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

A blog entry

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

Upvotes: 11

Vineet Reynolds
Vineet Reynolds

Reputation: 76709

You might want to attempt cancelling the event bubbling or propagation. Quirksmode.org 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.

Upvotes: 1

Cleiton
Cleiton

Reputation: 18113

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

Upvotes: -1

Noon Silk
Noon Silk

Reputation: 55062

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

Upvotes: -2

Related Questions