我要坚持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事件探秘
99527 学习 · 1305 问题
相似问题