2 lv qinyu lv_qinyu 于 2016.09.12 21:59 提问

一个关于js做的层次列表,有一点点问题,请大家帮忙看一下,谢谢啦

使用js做的一个列表层次,在点击加号后,列表展开,里面有好几个选项,但是点击选项之后,列表就自动关闭了,不知道我哪里的属相设置的有问题,以下是我的js的代码

 <script type="text/javascript">
    window.onload=setfunction;
    function setfunction(){
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            if(lis[i].className=="open"){
                lis[i].onmouseup=handlemouseup;
            }
        }
    }
    function handlemouseup(){
        var state;
        if(this.className=="open"){
            this.className="close";
            state="block";
        }
        else if(this.className=="close"){
            this.className="open";
            state="none";
        }
        var ulobj=this.getElementsByTagName("ul");
        ulobj[0].style.display=state;
    }
    </script>

列表是的层次是这样的

 <ul>
   <li>   
        <ul>
          <li></li>
           <li></li>
           <li></li>
       </ul>
   </li>
<li>   
        <ul>
          <li></li>
           <li></li>
           <li></li>
       </ul>
   </li>
</ul>

但是结果在执行的时候就成了不管点列表里面的哪一个,列表都会关闭,不知道有没有懂的人帮忙看一下问题,谢谢大家啦~~

4个回答

zhuzige521888
zhuzige521888   2016.09.12 22:28
已采纳

事件冒泡的原因,因为你的设置了父节点onmouseup,子节点虽然没有这个事件,但是点击子节点时,事件冒泡,会执行父节点的相同事件,阻止事件冒泡就好了。
function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else
window.event.cancelBubble=true
}

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

lv_qinyu
lv_qinyu 不好意思,这个东西我这个初学js的不太会,请问能不能说的更详细点呢
大约一年之前 回复
lv_qinyu
lv_qinyu 回复一个程序猿子:这个是jq的?
大约一年之前 回复
zhuzige521888
zhuzige521888 如 $("#pp").click(function(e){ alert("我是pp!"); stopBubble(e); });
大约一年之前 回复
lv_qinyu
lv_qinyu 谢谢你,我试试,看行不行
大约一年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.12 22:08

没看代码,太乱了,问题应该是选择器选择的对象搞错了

lv_qinyu
lv_qinyu 谢谢,我粘上去没想到成了这样,我看看,是不是选择器出错
大约一年之前 回复
lv_qinyu
lv_qinyu   2016.09.12 22:10

谢谢,我粘上去没想到成了这样,我看看,是不是选择器出错

lv_qinyu
lv_qinyu 回复当作看不见:那个应该是tagname=="open"||tagname=="close"那一些没有粘上去
大约一年之前 回复
qq_29594393
qq_29594393 js逻辑错误,前面都判断是否tagname=="open",就他调用这个函数,那调用的函数下面的部分根本不会有可能被执行,
大约一年之前 回复
zhuzige521888
zhuzige521888   2016.09.13 10:50
=========给你写个完整代码吧,如果//stopBubble(e); 注掉就会弹出两个框框,如果没有注掉就只有pp那个框框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>冒泡测试</title>
</head>
<body>
    <div id="dd">
        <div id="pp">clickme</div>
    </div>
    var pp = document.getElementById("pp");
    var dd = document.getElementById("dd");
    pp.onclick=function(e){ //给pp设置点击事件
            alert("我是pp!");
            //stopBubble(e); 
    };
    dd.onclick=function(e){ //给dd设置点击事件
            alert("我是dd!");
    };
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation()
        else 
            window.event.cancelBubble=true 
    }
    </script>
</body>
</html>
zhuzige521888
zhuzige521888 没事,昨天我都睡觉了,我以为你急成猴了呢
大约一年之前 回复
lv_qinyu
lv_qinyu 谢谢你,昨天晚上的网速太差了,导致消息一直发不出去,发出去就发了好多,不好意思哈
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片