Why does mouseout is triggered when child elements hovered?_问答_开发者

Why does mouseout is triggered when child elements hovered?

开发者 https://www.devze.com 2023-01-23 04:48 出处：网络

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:

相关专题：javascript

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">&开发者_开发问答lt;/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>

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

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.