javascript - 如何在我的网页上设置旋转器/轮播的焦点

Question

如何在我的网页上设置旋转器/轮播的焦点

根据我的代码，两个旋转器同时滑动，但我只希望聚焦的旋转器滑动。

我在 "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 
        }           
    });
});

Answer 1

您正在焦点函数内绑定(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/