                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

為什么按鍵盤方向鍵的時候整個頁面也同時在上下移動？？要如何修改呢？？

<!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;
??
??? // 點擊三角時
??? title.onclick=function(event){
????? // 執行腳本
????? menu.style.display='block';//顯示下拉菜單欄
????? stopPropagation(event);//阻止冒泡
??? }
???
???
??? //鍵盤事件
??? document.onkeydown=function(event)
??? {
??????? event=event||window.event;
?????? //點方向鍵上
?????? if(event.keyCode==38)
??????? {
??????????? if(index<as.length&&index>=0)
??????????? {as[index].style.backgroundColor='#fff';}
??????????? index--;
??????????? if(index<0)
??????????? {index=0;}
??????????? as[index].style.backgroundColor='#eee';
??????? }
??????? //點擊方向鍵下
??????? else if(event.keyCode==40)
??????? {
??????????? if(index<as.length&&index>=0)
??????????? {as[index].style.backgroundColor='#fff';}
??????????? index++;
??????????? if(index>=as.length)
??????????? {index=as.length-1;}
??????????? as[index].style.backgroundColor='#eee';
??????? }
??????? //回車
??????? else if(event.keyCode==13)
??????? {
??????????? as[index].style.backgroundColor='#fff';
??????????? menu.style.display='none';
??????????? title.innerHTML=as[index].innerHTML;
??????????? index=-1;
??????? }
??? }
???
???
???
??? //鼠標事件
?? // 滑過滑過、離開、點擊每個選項時
????? // 執行腳本
??? for(var i=0;i<as.length;i++)
??? {
??????? //鼠標移至背景色變成灰色
??????? as[i].onmouseover=function(){
??????????? this.style.backgroundColor='#eee';
??????? }
??????? //鼠標移開還原背景色
??????? as[i].onmouseout=function(){
??????????? this.style.backgroundColor='#fff';
??????? }
??????? //點擊選項將選項填至方框
??????? as[i].onclick=function(){
??????????? menu.style.display='none';
??????????? title.innerHTML=this.innerHTML;
??????????? stopPropagation(event);//阻止冒泡
??????? }
??? }
?? // 點擊頁面空白處時
?????? // 執行腳本
?????? document.onclick=function()
?????? {
?????????? menu.style.display='none';
?????? }
??????
??????
?????? //封裝一個冒泡函數
?????? function stopPropagation(event)
?????? {
?????????? event=event||window.event;
?????????? if(event.stopPropagation)
??????????????? event.stopPropagation();
?????????? else
??????????????? event.cancelBubble=true;
?????? }
?}
?? </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>