JS onclick 单击子对象 父对象也会相应onclick 函数 如何?

Question

比如说 
<script>
function xx(id){
if(document.getElementById(id).style.display!="none")
{
document.getElementById(id).style.display="none";
}
else
{
document.getElementById(id).style.display="block";
}}
</script><ul>
     <li onclick="xx(1)" >aaaaa</li>
     <ul id=1>
            <li onclick="xx(2)" >1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>当我单击 <li onclick="xx(2)" >1111</li> 的时候  <ul id=1></ul> 为什么也会隐藏？  怎么破？

Answer 1

function xx(id){
    if(document.getElementById(id).style.display!="none")
    {
alert(id);
        document.getElementById(id).style.display="none";
    }
    else
    {
        document.getElementById(id).style.display="block";
    }
}这样看你就知道这个方法执行了2次

Answer 2

<ul>
     <li onclick="xx(1)"  style="border:1px solid blue">aaaaa</li>
     <ul id=1 >
            <li onclick="xx(2)"  style="border:1px solid blue">1111</li>
            <ul id=2 >
                  <li style="border:1px solid blue">222222222</li>
            </ul>
     </ul>
</ul>给每个li加上边框，就知道为什么点击时父对象也被触发了

Answer 3

阻止事件冒泡．
<script>
function xx(id){
var ev = window.event || arguments.callee.caller.arguments[0];

if(window.event) ev.cancelBubble = true;
else
{
ev.stopPropagation();
}
    if(document.getElementById(id).style.display!="none")
    {
    
        document.getElementById(id).style.display="none";
    }
    else
    {
        document.getElementById(id).style.display="block";
    }
}
</script><ul>
     <li onclick="xx(1)" >aaaaa</li>
     <ul id=1>
            <li onclick="xx(2)" >1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>

Answer 4

这是因为事件冒泡造成的。
用如下代码：<script>
function xx(id)
{
    if(document.getElementById(id).style.display!="none")
    {
        document.getElementById(id).style.display="none";
    }
    else
    {
        document.getElementById(id).style.display="block";
    }
    window.event.cancelBubble=true; //ie s
    window.event.stopPropagation(); //ff s
}
</script><ul>
     <li onclick="xx(1)" >aaaaa</li>
     <ul id=1>
            <li onclick="xx(2)" >1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>

Answer 5

哦 虎哥   
我看你写的挺多 你看看我刚百度找到的  和您那个有什么区别啊 兼容性的if(document.all) 
{ 
event.cancelBubble = true;
}

Answer 6

没啥区别，都是判断是否是ie下．只要是ie下,if(document.all)就为真．其它浏览器没有document.all这个东西，和上面的window.event是一样的．

Answer 7

<ul>
     <li onclick="xx(1)" >aaaaa</li>
     <ul id=1>
            <li onclick="xx(2)" >1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>用嵌套上看 楼主这样的结果是导致节点很不清晰 +个样式可以看出<ul>
     <li onclick="xx(1)" style="border:1px solid #FF0000">aaaaa</li>
     <ul id=1>
            <li onclick="xx(2)" style="border:1px solid #000000">1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>------------------万恶的分割线---------------------------
<ul id=1>
     <li onclick="xx(2)" >1111</li>
     <ul id=2>
        <li>222222222</li>
     </ul>
</ul>
是作为
<li onclick="xx(1)" >aaaaa</li>的子节点 所以单击 <li onclick="xx(2)" >1111</li>会先执行xx(2),然后是xx(1)，日过楼主非要如此建议代码改成同级节点<ul>
     <ul><li onclick="xx(1)" >aaaaa</li></ul>  <!--添加一个ul标签组与下面的ul组匹配-->
     <ul id=1>
            <li onclick="xx(2)" >1111</li>
            <ul id=2>
                  <li>222222222</li>
            </ul>
     </ul>
</ul>

Answer 8

都会有啊.
事件流有两种
1.从外到里，谓之'捕获'，capture
2.从里到外，谓之'冒泡'，bubblingie只支持第一种,firefox可指定事件在capture阶段触发还是bubble阶段触发
多多google一下，或者买本<<JavaScript 高级程序设计>>看看，上面写得很清楚．