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">&开发者_开发问答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.
加载中,请稍侯......
精彩评论