求div嵌套后父子事件重复调用解决方案


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<style type="text/css"> 
<!-- 
*{margin:20px;}
#div1{ width:500px;
     height:400px;
background-color:#ccc;
}
#div2{width:300px;
height:200px;
background-color:#369;
}
#div3 {width:200px;
height:140px;
background-color:#f4f4f4;
}
--> 
</style> 
</head> 
<script type='text/javascript'>
function test(event){
alert('div3');
var e=window.event?window.event:event;
if (e.stopPropagation){
e.stopPropagation();
}else{
     e.cancelBubble=true;
}
}
</script>
<body> 
<div id='div1' onmouseup='alert("div1");'>
<div id='div2' onmouseup='alert("div2");'>
<div id='div3' onmouseup='test(event)'></div>
</div>
</div>
</body> 
</html>