為什么這里鼠標(biāo)按下切換選項(xiàng)時(shí)不需要阻止冒泡，而老師講的QQ面板的例子里就需要阻止冒泡？
<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>下拉菜單</title>
?<style?type="text/css">
body,ul,li{?margin:0;?padding:0;?font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
background:url(xjt.png)?no-repeat?right?center;}
#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
#divselect?ul?li{height:24px;?line-height:24px;}
#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}
?</style>
???<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;
???
????//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
??????//?執(zhí)行腳本
???event=event||window.event;
???if(event.stopPropagation){
????event.stopPropagation();
???}else{
????event.cancelBubble=true;
???}
???menu.style.display='block';
????}??
????
?document.onkeyup=function(event){
??for(var?i=0;i<as.length;i++){
????as[i].style.background='#fff';
??}
??if(event.keyCode==40){
???index++;
???if(index>as.length){
????index=0;
???}
???as[index].style.background='#567';
??}else?if(event.keyCode==38){
???index--;
???if(index<0){
????index=as.length;
???}
???as[index].style.background='#567';
??}
??if(index!=-1&&event.keyCode==13){
???title.innerHTML=as[index].innerHTML;
???menu.style.display='none';
???index=-1;
??}
?}
???//?滑過滑過、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
??????//?執(zhí)行腳本
???for(var?i=0;i<as.length;i++){
????as[i].onmouseover=function(){
?????this.style.background='#567';
????}
????as[i].onmouseout=function(){
?????this.style.background='#fff';
????}
????as[i].onclick=function(){
?????title.innerHTML=this.innerHTML;
?????menu.style.display='none';
????}
?}
???
???//?點(diǎn)擊頁(yè)面空白處時(shí)
???????//?執(zhí)行腳本
????document.onclick=function(){
?????menu.style.display='none';
?}
?}
???</script>
</head>
<body>
?<div?id="divselect">
??????<cite>請(qǐng)選擇分類</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>上面是我寫的，還有一個(gè)問題：
if(index!=-1&&event.keyCode==13){
???title.innerHTML=as[index].innerHTML;
???menu.style.display='none';
???index=-1;
??}這個(gè)if語(yǔ)句里面還需要清除背景嗎？document.onkeyup=function(event){}里一開始就清除背景了啊。我看到老師給的答案里有清除背景的for循環(huán)。
求大神快來解答?。。。?br />
2016-04-20
?//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
??????//?執(zhí)行腳本
???event=event||window.event;
???if(event.stopPropagation){
????event.stopPropagation();
???}else{
????event.cancelBubble=true;
???}
???menu.style.display='block';
????}?
為什么這里需要阻止事件冒泡呢，父元素也沒有類似的點(diǎn)擊事件??？
2016-03-18
因?yàn)檫@里的選項(xiàng)，他的父是ul為祖父是id為divselect的div...，父和祖父都沒有添加鼠標(biāo)點(diǎn)擊事件，的確事件冒泡了，但是他們都沒有事件處理程序，所以不需要阻止時(shí)間冒泡；
這里不需要了。因?yàn)榘聪掳存I后循序執(zhí)行的關(guān)系，清除背景會(huì)先被執(zhí)行。