课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请问为什么我的代码这样写鼠标可以控制，可是键盘就控制不了呢？代码错在哪？怎么改

来源：5-1 编程挑战

jazia

2016-09-22 01:31

<!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,

btn = false;


// 点击三角时

title.onclick = function(event) {

event = event || window.event;

if(event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble();

}

if(btn == false) {

menu.style.display = "block";

btn = true;

} else {

menu.style.display = "none";

btn = false;

}


// 键盘事件

document.onkeyup = function(event) {

e = event || window.event;

if(e.keyCode == 40) {

index++;

if(index >= as.length) {

index = 0;

}

changebgd();

}

if(e.keyCode == 38) {

if(index <= 0) {

index = as.length;

}

index--;

changebgd();

}

}


}


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

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

as[i].index = i;//得这样传值否则匿名函数获取不到i的值

as[i].onmouseover = function() {

for(var j = 0; j < as.length; j++) {

as[j].style.background = "none";

}

this.style.background = "#ccc";

index = this.index;

keyenter();

}

//   as[i].onmouseout=function(){

//       this.style.background="#fff";

//   }上面那样写、键盘上下移动后鼠标移动，LI不存在两个“被选”。

as[i].onclick = function() {

title.innerHTML = this.innerHTML;

reset();

}

// 执行脚本

}


// 执行脚本


function changebgd() {

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

as[i].style.background = "none";

}

as[index].style.background = "#ccc";

keyenter();

}


function keyenter() {

document.onkeyup = function(event) {

event = event || window.event;

if(event.keyCode == 13 && index != -1) {

title.innerHTML = as[index].innerHTML;

reset();

document.onkeyup=null;

}

}

}


// 点击页面空白处时

document.onclick = function() {

reset();

}


//复位函数

function reset() {

if(btn == true) {

if(index != -1) {

as[index].style.background = "none";

index = -1;

}


menu.style.display = "none";

btn = false;

}


}

// 执行脚本

}


</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>

如果改，怎么个改法最好最少呢

写回答 关注

3回答

  • 慕粉3801737
    2016-09-22 15:48:06
    已采纳

    设置index值就是为了鼠标和键盘可以共同利用这个值控制选中项，每次鼠标经过或上下键按动时index值都在刷新，所以没必要到处调用keyenter()函数，只需要判断按键的键值的三种情况进行处理或者调用处理函数，你调用函数，各种嵌套，函数内又触发事件，反而有点乱了。

    还有个小问题，如果点开下拉列表，不选选项的话点空白处，选项隐藏不了，因为不选选项的话index值为-1，reset()函数第一句话走不通。建议：

    1、将判断键值的三种情况写到一起，document.onkeyup=function(){} 里面；

    2、将keyenter()中只留处理的两行代码；

    3、去掉鼠标划过和函数changeBgd()中的keyenter()函数调用；

    4、在判断回车键条件中调用keyenter()函数；

    5、将reset()函数第一句话改为遍历列表全部设置背景色；

    <!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,
        btn=false;
    // 点击三角时
    title.onclick=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble();
        }
        if(btn==false){
           menu.style.display="block";
           btn=true;
       }else {
           menu.style.display="none";
           btn=false;
       }
       
   }
    // 鼠标滑过、离开、点击每个选项时
   for(var i=0;i<as.length;i++){
       as[i].index=i;
       as[i].onmouseover=function(){
           for(var j=0;j<as.length;j++){
               as[j].style.background="#fff";
           }
           this.style.background="#ccc";
           index=this.index;
           //keyenter();
       }
    //   as[i].onmouseout=function(){
    //       this.style.background="#fff";
    //   }上面那样写、键盘上下移动后鼠标移动，LI不存在两个“被选”。
       as[i].onclick=function(){
           title.innerHTML=this.innerHTML;
           reset();
       }
      // 执行脚本
}  
   // 键盘事件
   document.onkeyup=function(event){
       event=event||window.event;
       if(event.keyCode==40){
           index++;
           if(index>=as.length){
               index=0;
           }
           changeBgd();
       }
       if(event.keyCode==38){
           if(index<=0){
               index=as.length;
           }
           index--;
           changeBgd();
       }
       if(event.keyCode==13){
           keyenter();
       }
   }
      // 执行脚本
   function keyenter(){
        title.innerHTML=as[index].innerHTML;
        reset();
       
   }
   function changeBgd(){
       //alert("1");
       for(var i=0;i<as.length;i++){
           as[i].style.background="none";
       }
       as[index].style.background="#ccc";
       //keyenter();
   }
   // 点击页面空白处时
   document.onclick=function(){
       reset();
   }
   //复位函数
   function reset(){
       for(var i=0;i<as.length;i++){
          as[i].style.background="none";
       }
          index=-1;
          menu.style.display="none";
          btn=false; 
   } 
 }
   </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>


    2 0

    jazia

    这样改条理清晰多了，原来不用调用keyenter函数的，按回车键它就自动调用了，不用我们写，谢谢仔细认真的回答

    2016-09-22 19:26:10

    共 2 条回复 >

  • 无敌小哥儿
    2016-12-07 00:31:03

    求教一下，你的“// 鼠标滑过、离开、点击每个选项时”这段代码中，这个as[i].index=i;是什么意思？？

    0 0
  • 杰森伯恩
    2016-09-22 14:59:35

    建议你下载源码看下吧，封装函数有问题，各种函数嵌套反而更乱了

    1 0

    jazia

    谢谢回答，不用了，楼上解决了。

    2016-09-22 19:26:42

    共 1 条回复 >

DOM事件探秘

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

99545 学习 · 1197 问题

查看课程

相似问题

先点击鼠标开始然后在点回车结束是怎么控制的？

回答 1

键盘事件，控制台显示缺少对象

回答 1

控制台的这个问题该怎么解决

回答 1

请问我这样写为什么松了鼠标之后，边框还是跟着鼠标移动

回答 1

代码错在哪？登录框不会跟着鼠标动！

回答 1

打开慕课网App查看更多内容