js冒泡? 你出现的问题可能跟getElementsByTagName得到的数组,查看一下for执行各个div的顺序 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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> 其实事件是响应了,不过当 subdiv 的父div 响应事件的时候,var o = e.target ? e.target : e.srcElement;这里的o,仍然指向的是 subdiv前面的例子可能不能说明问题。再举一个例子给你参照。<!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){ z++; this.style.zIndex = 999; } } } </script> </head> <body> <div id="div1" 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> <!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){ z++; this.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> <!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.parentNode.nodeName=='DIV'){ 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>2种方式,随便你用 <!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.parentNode.nodeName=='DIV'){ 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>2种方式,随便你用 2种事件的捕捉方式1、冒泡指的是从内到外执行所有的事件2、capture值的是从外到内执行所有的事件 ☆★☆★像豆瓣网上传动态头像后却变成了静态不会动的,请问是怎么实现的呢? 一个js的程序有点不懂,大家指点一下,谢谢了! Firefox中打开模态窗 javascript 骨骼小人实现 请问如何在我的表格上单击任何一个单元格的时候,显示这个单元格的高度 帮忙一个javascript问题 有没用JAVASCRIPT写的算法的书??无聊者勿扰!!! 判断并提示设置首页的问题 求教一个函数, 如何实现这个功能? 如何生成一个自定义大小的浏览框......以及.....?急急急!!!! 新手 问个关于UTF-8转换的问题 马上给分!!! 删除空格的方法??
<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>
不过当 subdiv 的父div 响应事件的时候,
var o = e.target ? e.target : e.srcElement;
这里的o,仍然指向的是 subdiv
前面的例子可能不能说明问题。
再举一个例子给你参照。
<!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){
z++;
this.style.zIndex = 999;
}
}
}
</script>
</head>
<body>
<div id="div1" 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>
<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){
z++;
this.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>
<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.parentNode.nodeName=='DIV'){
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>
2种方式,随便你用
<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.parentNode.nodeName=='DIV'){
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>
2种方式,随便你用
1、冒泡指的是从内到外执行所有的事件
2、capture值的是从外到内执行所有的事件