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

Question

如何在网页上设置旋转器/转盘的焦点

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

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

我的代码是：

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

您将事件绑定到焦点函数中。 一旦事件绑定，就绑定了。 使元素失去焦点不会解除绑定先前的事件，除非您通过在.blur()事件中编写.unbind()语句来明确告知它。

但是，最好不要在.keydown()事件之外绑定一次 .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/