父子关系的层上绑定事件的疑惑，父层事件触发后子层不再触发


<!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>
</head>
<body><button id="add" style="display:block; position:relative; left:150px;top:50px; margin:5px;" >addLisener</button>
<div id="s1" style="border:#FF9933 solid 1px; width:400px; height:200px;">
<div id="s2" style="border:#FF9933 dotted 1px; width:300px; height:150px; margin:10px;">
s2:
</div>
s1:
</div><script type="text/javascript">
var btn = document.getElementById("add");
btn.onclick= addlisener;function addlisener(){
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");var eventFun1=function(){ s1.innerHTML+='1'; }
var eventFun2=function(){ s2.innerHTML+='2'; }//IE & FIREFOR
//s1.onmouseover=eventFun1;
//s2.onmouseover=eventFun2; //FIREFOX
s1.addEventListener("mouseover",eventFun1,false);
s2.addEventListener("mouseover",eventFun2,false);//IE
//s1.attachEvent("onmouseover",eventFun1);
//s2.attachEvent("onmouseover",eventFun2);
}
</script></body>
</html>通过修改addEventListener第三参数决定事件发生先后关系或者修改事件类型比如mousedown、mouseup来影响，
只要父容器s1事件触发过后，s2上的事件不再触发如果注册为 mouseover 事件时，仅把鼠标放在s2上，firefox下的事件持续不断被触发，(ie下不会)非常困惑，我哪里写错了？

解决方案 »

  1.   


    <!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=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <style type='text/css'>
    *{padding:0;margin:0;}
    body{font-size:12px;font-family:"宋体";}
    </style>
    <div id="a" style="border:#FF9933 solid 1px; width:400px; height:200px;">
    <div id="c" style="border:#FF9933 dotted 1px; width:300px; height:150px; margin:10px;background:#f00;">
    <div id="b" style="border:#FF9933 dotted 1px; width:240px; height:100px; margin:10px;background:#eee;"> </div>
    </div>
    </div>
    <script type="text/javascript">
    var a1 = document.getElementById("a");
    var b1 = document.getElementById("b");a1.onclick = function(){
    var e = arguments[0] || window.event; 
    if(e.stopPropagation) {
    e.stopPropagation();
    } else {
    e.cancelBubble = true;
    }

    //如果以这种方式改变元素内部的文本，则会发生奇怪的事情，父层事件触发后子层不再触发，即使事件类型不一样。
    //子元素的事件还是存在的，但就是不触发了。
    //this.innerHTML+='1';

    //这样却不会。
    var s = document.createTextNode('1');
    this.appendChild(s);

    var o = e.target || e.srcElement;
    alert(o.id + this.id)
    };
    b1.onmouseover = function(){
    var e = arguments[0] || window.event; 
    if(e.stopPropagation) {
    e.stopPropagation();
    } else {
    e.cancelBubble = true;
    }

    //同上
    //this.innerHTML+='2';

    var s = document.createTextNode('1');
    this.appendChild(s);
     
    var o = e.target || e.srcElement;
    alert(o.id + this.id)
    }; 
    </script>
    </body>
    </html>
      

  2.   

    也就是说，如果子元素上绑定有事件。
    而用innerHTMl来改变父元素内部的DOM。
    那么子元素的事件虽然还是存在的，但不再被触发。
      

  3.   

    果然是innerHTML修改父元素的问题
    微软发明的这个东西不靠谱