我要坚持11
2017-05-12 17:29
window.onload=function(){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'), index=-1, flog=0; // 点击三角时 title.onclick=spread; // 滑过滑过、离开、点击每个选项时 for(var i=0;i<as.length;i++){ as[i].onmouseover=gray; as[i].onmouseout=bland; as[i].onclick=cli; document.onkeyup=choose; } // 点击页面空白处时 document.onclick=Close; function choose(event){ event=event ||window.event; if(index<-1){ index=as.length; }else if(index>as.length){ index=-1; }else{ menu.style.display="block"; } if(event.keyCode==40){ index+=1; for(var j=0;j<as.length;j++){ as[j].style.backgroundColor="#FFF"; } as[index].style.backgroundColor="#ccc"; }else if(event.keyCode==38){ index-=1; for(var j=0;j<as.length;j++){ as[j].style.backgroundColor="#FFF"; } as[index].style.backgroundColor="#ccc"; }else if(event.keyCode==13){ title.innerHTML=as[index].innerHTML; menu.style.display="none"; } } function cli(){ title.innerHTML=this.innerHTML; } function bland(){ this.style.backgroundColor="#FFF"; } function gray(){ this.style.backgroundColor="#ccc"; } function spread(event){ event=event ||window.event; if(flog==0){ menu.style.display="block"; flog=1; }else{ menu.style.display="none"; flog=0; } if(event.stopPropagation()){ event.stopPropagation(); }else{ event.cancelBubble(); } // 执行脚本 } function Close(){ // 执行脚本 menu.style.display="none"; } }
就是键盘选择的时候,按到头(最上或者最下)就需要再按两下才能接上,这个问题我也知道出在哪,判断index时,如果是4就会有问题了,所以需要按两下。但是以目前水平确实没有好的办法
你的 index 判断那部分写的有些不合理,你看看我的,判断其实没那么麻烦
window.onload = function() { var box = document.getElementById('divselect'), title = box.getElementsByTagName('cite')[0], menu = box.getElementsByTagName('ul')[0], as = box.getElementsByTagName('a'), index = -1; var items = menu.getElementsByTagName('a'); // 点击三角时 title.onclick = function(event) { var e = event || window.event; if (e.stopPropagation) { e.stopPropagation(); } else if (e.cancelBubble) { e.cancelBubble = false; } // 执行脚本 menu.style.display = 'block'; index=-1; setItemStyle(index); }; // 滑过滑过、离开、点击每个选项时 // 执行脚本 for (var i = 0; i < as.length; i++) { var a = as[i]; a.onmouseenter = function(event) { var e = event || window.event; e.target.style.backgroundColor = '#cc00cc'; e.target.style.color = '#fff'; }; a.onmouseout = function(event) { var e = event || window.event; e.target.style.backgroundColor = '#fff'; e.target.style.color = '#222'; }; a.onclick = function(event) { title.innerHTML = event.target.innerHTML; }; } // 点击页面空白处时 // 执行脚本 document.documentElement.onclick = function(event) { menu.style.display = 'none'; }; document.documentElement.onkeydown = function(event) { var e = event || window.event; var key_enter = 13, key_up = 38, key_down = 40, item_len = menu.children.length - 1; if (e.stopPropagation) { e.stopPropagation(); } else if (e.cancelBubble) { e.cancelBubble = false; } if (e.keyCode === key_enter) { title.innerHTML = items[index].innerHTML; index = -1; setItemStyle(index); menu.style.display = 'none'; } else if (e.keyCode === key_up) { if (index <= 0) { index = item_len; }else{ index--; } setItemStyle(index); } else if (e.keyCode === key_down) { if (index >= menu.children.length - 1) { index = 0; }else{ index++; } setItemStyle(index); } }; function setItemStyle(index) { for (var i = 0; i < items.length; i++) { var item = items[i]; item.style.color = '#222'; item.style.backgroundColor = '#fff'; } if (index <= items.length && index >= 0) { items[index].style.backgroundColor = '#ddd'; } } }
DOM事件探秘
99544 学习 · 1197 问题
相似问题