如何在我的网页上设置旋转器/轮播的焦点
根据我的代码,两个旋转器同时滑动,但我只希望聚焦的旋转器滑动。
我在 "carousel_inner"
div
上添加了 tabindex 属性,并且还在 "#home_rotator"
上添加了 tabindex div
然后调用焦点函数,但它们同时聚焦在我的网页中
我的代码是:
$("#carousel_inner").attr("tabindex",0).focus(function() {
$(document).keydown(function(eventObject) {
if(eventObject.which==37) {//left arrow
$("#carousel_inner").focus();
$('#left_scroll').click();//emulates click on prev button
} else if(eventObject.which==39) {//right arrow
$("#carousel_inner").focus();
$('#right_scroll').click();//emulates click on next button
}
});
});
//添加键盘导航
$("#home_rotator").attr("tabindex",-1).focus(function() {
$(document).keydown(function(eventObject) {
if(eventObject.which==37) {//left arrow
$("#home_rotator").focus();
base.goBack();//emulates click on prev button
} else if(eventObject.which==39) {//right arrow
$("#home_rotator").focus();
base.goForward(); //emulates click on next button
}
});
});
最佳答案
您正在焦点函数内绑定(bind)事件。一旦事件被绑定(bind),它就被绑定(bind)了。取消元素焦点不会取消绑定(bind)先前的事件,除非您通过在 .blur()
事件中编写 .unbind()
语句来明确告知它。
但是,您最好在 focus()
事件之外绑定(bind) .keydown()
事件一次,然后检查哪个元素具有焦点并执行所需的操作。
$(document).keydown(function(e) {
if ( document.activeElement.id === 'carousel_inner' ) {
if ( e.which === 37 ) {
// event for left key on carousel_inner
}
else if ( e.which === 39 ) {
// event for right key on carousel_inner
}
}
else if ( document.activeElement.id === 'home_rotator' ) {
if ( e.which === 37 ) {
// event for left key on home_rotator
}
else if ( e.which === 39 ) {
// event for right key on home_rotator
}
}
});
jsFiddle:http://jsfiddle.net/9ErRF/
关于javascript - 如何在我的网页上设置旋转器/轮播的焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13685653/