为什么我点击li列表时没有添加阻止冒泡,也能正常关闭列表啊

来源:5-1 编程挑战

奔跑的读书人

2017-04-10 23:16

 <script type="text/javascript">

window.onload=function(){

var box=document.getElementById('divselect'),

   title=box.getElementsByTagName('cite')[0],

   menu=box.getElementsByTagName('ul')[0],

   as=box.getElementsByTagName('a'),

        index=-1;

   

    // 点击三角时

    title.onclick=function(event){

      // 执行脚本

      menu.style.display='block';

      event=event || window.event;

      event.stopPropagation();

    }  

    

   // 滑过滑过、离开、点击每个选项时

      // 执行脚本

    var li=menu.getElementsByTagName('li');

    for(var i=0;i<li.length;i++){

        li[i].onmouseover=function(){

            this.style.backgroundColor='#ccc';

        }

        li[i].onmouseout=function(){

            this.style.backgroundColor='#fff';

        }

        li[i].onclick=function(){

            menu.style.display='none';

            title.innerHTML=this.getElementsByTagName('a')[0].innerHTML;

        }

    }

   // 点击页面空白处时

       // 执行脚本

    document.onclick=function(){

        menu.style.display='none';

        

    }

 }

   </script>


写回答 关注

2回答

  • 大雾哈
    2017-06-26 18:54:54

    因为document.onclick隐藏了,除了点title 阻止了冒泡,其他地方都是冒泡,点li也是,就隐藏了

  • disabled
    2017-04-12 09:49:07

    因为这里的ul和cite元素是同一层的,你的显示列表事件是绑定在cite里的,当你触发li下面的事件时只会向上冒泡:a-li-ul-div-document,并不会触及cite

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99545 学习 · 1197 问题

查看课程

相似问题