1

Web ページでローテーター/カルーセルのフォーカスを設定するにはどうすればよいですか

私のコードによると、両方のローテーターが同時にスライドしますが、フォーカスされているローテーターだけをスライドさせたいです。

に tabindex 属性を追加した"carousel_inner" divだけでなく、 にも tabindex を追加して"#home_rotator" divからフォーカス関数を呼び出しましたが、それらは Web ページで同時にフォーカスされています

私のコードは次のとおりです。

$("#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 
        }           
    });
});
4

1 に答える 1

0

フォーカス関数内でイベントをバインドしています。イベントがバインドされると、バインドされます。.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/

于 2012-12-03T15:34:27.527 に答える