CODEWITHSUNDEEP
javascripthtml
Nelson Galdeman Graziano
Nelson Galdeman Graziano

Reputation: 562

onMouseOut in father called when onMouseOver in child

I have this code:

http://jsfiddle.net/SXj2W/

<div id='father' style='width:50px; height:50px;overflow:hidden;' onMouseOut="alert('called');">
    <div id='container' style='margin-top:0px;width:100%;height:100%;transition: margin 2s;'>
        <div style='width: 50px;height:50px;background-color:rgb(255,0,0);' onClick="document.getElementById('container').style.marginTop='-50px'"></div>
        <div style='width: 50px;height:50px;background-color:rgb(0,0,255);' onClick="document.getElementById('container').style.marginTop='0px'"></div>
    </div>
</div>

If you click on the red box, the blue box will appear from bottom... when onMouseOver the blue box is called, onMouseOut from father is called too...

Do you know a workaround to do not see the alert if the mouse is still inside "father".

Upvotes: 0

Views: 172

Answers (1)

JRam
JRam

Reputation: 529

Here is an updated fiddle with a working example: http://jsfiddle.net/SXj2W/2/

When onmouseout is fired you have to check to see that the event's related target is not a child element of your parent DIV. You can do this using the below code.

Add a function to call on mouseout to your page's <HEAD>

function onMouseOut(self,event) {    
   var e = event.toElement || event.relatedTarget;
    while(e && e.parentNode && e.parentNode != window) {
        if (e.parentNode == self||  e == self) {
            if(e.preventDefault) e.preventDefault();
            return false;
        }
        e = e.parentNode;
    }
    alert('Mouseout on father');
}

And then update your parent div to look like:

<div id='father' style='width:50px; height:50px;overflow:hidden;' onmouseout="onMouseOut(this,event)">

Upvotes: 3

Related Questions