CODEWITHSUNDEEP
javascript
Soverin
Soverin

Reputation: 79

Why does mouseout is triggered when child elements hovered?

The wonder is the mouseout event triggering when the mouse cursor goes over the child node. Why does it happen if the cursor hasn't been out of the parent node? Please consider this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type='text/javascript'>

    function someFunc(obj) {
        document.getElementById('info').innerHTML = 'over';
        document.getElementById('info3').innerHTML = 'over';

        obj.onmouseout = function() { 
            document.getElementById('info2').innerHTML = 'out';
            document.getElementById('info3').innerHTML = 'out';
        }

        if (!obj.theChild) {
            var theChild = document.createElement('div');
            theChild.style.position = 'relative';
            theChild.style.left = '20px';
            theChild.style.top = '20px';
            theChild.style.width = '40px';
            theChild.style.height = '40px';
            theChild.style.background = '#eeee00';
            obj.theChild = theChild;
            obj.appendChild(theChild);
        }
    }

</script> 
<head>
<body>

    <span id="info"></span> <span id="info2"></span> <span id="info3"></span>

    <div style="position:absolute;top:100px;left:100px;width:100px;height:100px;background:#000000;" onmouseover="someFunc(this);"></div>

</body>
</html>

Upvotes: 2

Views: 1139

Answers (2)

Calmarius
Calmarius

Reputation: 19431

Every event (unless you stop it's propagation) bubbles up to the parent element. So when the mouse cursor leaves the child element an onmouseout event is generated on it, but it's unhandled, so it will propagate to the parent element and fires it's event handler.

Upvotes: 2

methodin
methodin

Reputation: 6712

Event bubbling http://www.quirksmode.org/js/events_mouse.html

Upvotes: 2

Related Questions