怎么在目标对象节点下加上一个或多个子节点后就触发不了原本目标对象的事件?例如在下面代码中div下若没子节点subdiv层,div原本的onclick事件可以触发,但在div下添加子节点subdiv就触发不了onclick事件,请问这是否事件冒泡,有什么办法可以解决即使目标对象div有子节点subdiv扔可以触发onclick事件?
<!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" />
<style type="text/css">
div {
position: absolute;
width: 200px;
height: 120px;
}
</style>
<script type="text/javascript">
var z = 2;
window.onload = function(){
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function(e){
var e = e || window.event;
var o = e.target ? e.target : e.srcElement;
z++;
if (o.id == "subdiv") {
o.parentNode.style.zIndex = z;
}
else {
o.style.zIndex = z;
}
}
}
}
</script>
</head>
<body>
<div style="background:#FFCE9D;left:20px;top:20px;z-index:1;">
<div id="subdiv">
why? why? why? why? why? why? why? why? why? why? why? why? why? why?
</div>
</div>
<div style="background:#9DFF9D;left:50px;top:80px;z-index:2;">
</div>
<!---->
<div style="background:#FFCE9D;left:300px;top:20px;z-index:1;">
</div>
<div style="background:#9DFF9D;left:330px;top:80px;z-index:2;">
</div>
</body>
</html>