奔跑的读书人
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>
因为document.onclick隐藏了,除了点title 阻止了冒泡,其他地方都是冒泡,点li也是,就隐藏了
因为这里的ul和cite元素是同一层的,你的显示列表事件是绑定在cite里的,当你触发li下面的事件时只会向上冒泡:a-li-ul-div-document,并不会触及cite
DOM事件探秘
99545 学习 · 1197 问题
相似问题