js冒泡？

你出现的问题可能跟getElementsByTagName得到的数组，
查看一下for执行各个div的顺序

解决方案 »

  1.   

    <!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>
      

  2.   

    其实事件是响应了，
    不过当 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>
      

  3.   

    <!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>
      

  4.   

    <!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种方式，随便你用
      

  5.   

    <!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种方式，随便你用
      

  6.   

    2种事件的捕捉方式
    1、冒泡指的是从内到外执行所有的事件
    2、capture值的是从外到内执行所有的事件