我正在尝试创建一个使用jQuery的导航菜单。我希望键盘用户能够与鼠标用户拥有相同的体验,因此我在我的
您可以在这里查看。
hover()
事件处理程序中复制了功能,并在我的focus()
和blur()
事件处理程序中使用。但是,出现了明显的延迟问题,当用户点击链接时,在Firefox和IE中不会出现这种情况,如果将focus()
和blur()
代码移除,也不会出现延迟问题。我该如何加速呢?我已经尽力优化我的JavaScript知识,但我没有看到任何“加速”,所以我认为这可能与这些浏览器处理事件的方式有关。
我是否忽略了什么重要的事情?或者有没有其他方法可以保持键盘用户的可访问性而不使用这些事件?
var statePad=0;
function stateChanger(ourStatePad) {
//the purpose of this function is to translate the current state of the menu into a different graphical representation of the menu state.
var tempVar=ouStatePad;
var tempArray = new Array;
tempArray[5]=0;
for (var x=0;x < 5;x++) {
tempArray[x]=tempVar % 10;
tempVar=(tempVar-tempArray[x])/10;
}
for (var arrayIndex=4;arrayIndex>=0;arrayIndex--) {
//Calculate the proper position in our CSS sprite, based on the each link's state, as well as it's neighbors'.
$(".block").eq(4 - arrayIndex)
.css(
"background-position",
//x-position
((4 - arrayIndex) * -100) + "px " +
//y-position
(tempArray[arrayIndex] + ((3 * tempArray[(arrayIndex) + 1]) * -30))) + "px";
}
}
function hoverState(index,sign) {
var placeholder=Math.pow(10,4-index);
if (statePad != placeholder*2)
statePad += (placeholder * sign);
stateChanger(statePad);
}
.click(function() {
var index=$("#navbar a").index(this);
statePad=Math.pow(10,(4-index))*2;
stateChanger(statePad);
$(".active").removeClass("active");
$(this).addClass("active");
})
.hover(
function () {
hoverState($("#navbar a").index(this),1);
},
function () {
hoverState($("#navbar a").index(this),-1);
});
$("#navbar a").focus(
function() {
hoverState($("#navbar a").index(this),1);
}
);
$("#navbar a").blur(
function() {
hoverState($("#navbar a").index(this),-1);
}
);
});
您可以在这里查看。