键盘事件未能调用，鼠标事件出现小bug；看不出的问题所在求大神-慕课网

键盘事件未能调用，鼠标事件出现小bug；看不出的问题所在求大神

来源：5-1 编程挑战

jicheng

2016-06-27 10:26

<!DOCTYPE>
<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{
    position:relative;
    width:200px;
    color:#a19595;
    margin:0px auto;
    z-index:10000;
}
#divselect cite {
    width:180px;
    height:30px;
    line-height:30px;
    color:#a19595;
    cursor:pointer;
    display:block;
    border:1px solid black;
    padding-left:2px;
    padding-bottom:5px;
}

#divselect ul{position:absolute;
z-index:20000;
width:182px;line-height:30px;
margin-top:-1px;
background-color:#fff;
border:1px solid #333333;
display:none;
}
#divselect ul li{height:20px;line-height:20px;}
a{text-decoration:none;diaplay:block;
height:24px;
color:#333333;
padding-right:5px;
padding-left:5px;
}

    
        
    </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;
   
    // 点击三角时
    title.onclick=function(event){
        event=event||window.event;
        if(event.stopProgation){event.stopProgation();}
        else{event.cancelBubble=true;}   // 执行脚本
        //jp
        menu.style.display="block";
        //键盘事件未能成功调用//
        document.onkeyup=function(event){
        event=event||window.event;
        if(event.keyCode==13){
            for(var i=0;i<as.length;i++){
                as[i].style.background="#fff";
            }
            title.innerHTML=as[index].innerHTML;
            menu.style.display="none";
        }
        
   if(evnet.keyCode==40){
       index++;
       if(index>=as.length){index=0;}
       for(var i=0;i<as.length;i++){
           as[i].style.background="#ccc";           
       }
       as[index].style.background="#fff";
   }
  else if(event.keyCode==38){
      index--;
      if(index<0) index=as.length-1;
       for(var i=0;i<as.length;i++){
           as[i].style.background="#fff";
       }
       as[index].style.background="#ccc";
   }
        }
    }  
    //mouse
  for(var i=0;i<as.length;i++){
      as[i].num=i;
      as[i].onmousemove=function(){
          this.style.background="#fff";
          index=as[i].num-1;
      }
      as[i].onmouseout=function(){
          this.style.background="#9a9a9a";
      }
      as[i].onclick=function(event){
      event=event||window.event;
        if(event.stopProgation){event.stopProgation();}
        else{event.cancelBubble=true;}
        menu.style.display="none";
        title.innerHTML=this.innerHTML;
      }
  }
    
   document.onclick=function(){
       menu.style.display="none";
   }
  //点击空白处  
 }  
    </script>
    </head>
    <body>
        <div id="divselect">
            <cite>请选择分类</cite>
            <ul>     
         <li id="li"> <a href="javascript:;" selectid="1">ASP开发</a></li>
         <li><a href="javascript:;" selectid="2">.NET开发</a></li>
         <li><a href="javascript:;" selectid="3">PHP开发</a></li>
         <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
         <li><a href="javascript:;" selectid="5">Java特效</a></li>
     </ul>
        </div>
    </body>
    
</html>

写回答关注