嵌套DIV中的onClick事件在嵌套容器中的连环作用

嵌套 DIV的onClick 事件在嵌套容器中的连环作用:
===========================
遇到一个奇怪的问题,代码如下:
===========================
<html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<head>
<style>
. div0{
background-color:#555555;
width:210px;
height:210px;
position:absolute;
}
. div1 {
margin:30;
background-color:#000000;
width:150px;
height:150px;
position:absolute;
}
. div2 {
margin:30;
padding:30;
background-color:#ffffff;
width:90px;
height:90px;
position:absolute;
font-size:20px;
}
</style>
<script>
function a(obj){
alert("id:"+obj.id);
}
</script>
</head>

<body>
< div id="d0" class=" div0"
< div id="d1" class=" div1"
< div id="d2" class=" div2" onclick="a(this)">测试</ div>
</ div>
</ div>
</body>
</html>
====================
问题描述:
====================

在嵌套容器中,为什么我点击最里面 div后会触发父 div 的onclick 事件?由此形成一个连环调用,这样很不方便,因为我只是需要此时单击的那个 div。这种现象应该是内定规则,有没有关于此连环调用现象的官方解释?

这是 事件的浮升(冒泡)
禁止 事件浮升用event.cancelBubble=true

< div id="d0" class=" div0"
< div id="d1" class=" div1"
< div id="d2" class=" div2" onclick="a(this);event.cancelBubble=true;">测试</ div>
</ div>
</ div>

你可能感兴趣的:(职场,div,onclick,休闲)