Why does mouseout is triggered when child elements hovered?

Question

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>

Answer 1

事件冒泡http://www.quirksmode.org/js/events_mouse.html

Answer 2

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.

Why does mouseout is triggered when child elements hovered?

Question

2 answers

solution1
2 2010-11-04 02:40:52

solution2
2 2011-03-22 11:59:36

Why does mouseout is triggered when child elements hovered?

Question

2 answers

solution1 2 2010-11-04 02:40:52

solution2 2 2011-03-22 11:59:36

solution1
2 2010-11-04 02:40:52

solution2
2 2011-03-22 11:59:36