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

Question

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

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

我在"carousel_inner" div添加了tabindex属性，并且我还在"#home_rotator" div上添加了tabindex，然后调用了焦点函数，但它们是同时关注我的网页

我的代码是：

$("#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

您在焦点功能中绑定事件。一旦事件被绑定，它就会受到约束。取消聚焦元素不会取消绑定先前的事件，除非您通过在.unbind()事件中编写.blur()语句来明确告知它。

但是，你最好在.keydown()事件之外绑定focus()事件一次，然后检查哪个元素具有焦点并执行所需的操作。

$(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/