Обнаружение, когда ребенок вне элемента получает фокус

Question

Вот основные настройки: в верхней части веб-сайта есть тонкая полоса, содержащая ссылки, связанные с доступностью. Если javascript включен, он скрыт (отрицательное поле). Тем не менее, я хотел бы показывать панель всякий раз, когда пользователь вкладывает ссылки. Вот что я делаю:

var bar = $("#bar");
bar.find("a").on("focus", function(){
    if(bar.css("margin-top") == "-50px"){
        bar.animate({ marginTop: 0 }, 250);
    }
});

Это работает. Однако, когда дело доходит до закрытия этого бара, это становится немного сложнее. Если я связываю событие blur с a, оно будет скрыто при переходе по каждой ссылке . Я хочу скрыть это только тогда, когда все ссылки размыты.

Я хотел бы сделать это:

bar.find("a").on("blur", function(){
    // If no links inside #bar have focus now:
    bar.animate({ marginTop: -50 }, 250);
});

Как?

Answer 1

Сделай так:

bar.find("a").on("blur", function() {    
    setTimeout(function() { 
        if( $('a:focus').length === 0 ) {
            // If no links inside #bar have focus now:
            bar.animate({ marginTop: -50 }, 250);
        }
    }, 15);
});

Этот запрос запрашивает все anchors, которые могут иметь фокус, если .length равно нулю, мы должны знать, что мы можем скрыть этот бар сейчас. Я еще не тестировал этот код, пожалуйста, дайте мне знать.

См. http://api.jquery.com/focus-selector/

Пример: http://jsfiddle.net/e4PaN/

Answer 2

Поскольку событие blur срабатывает до события focus, вы должны установить тайм-аут в событии blur и отменить его в событии focus.

(function () {

    var bar = $("#bar");
    var timeout;

    bar.find("a").on("focus", function(){
        clearTimeout(timeout);

        if(bar.css("margin-top") == "-50px"){
            bar.animate({ marginTop: 0 }, 250);
        }
    });

    bar.find("a").on("blur", function(){
        timeout = setTimeout(function () {
            // If no links inside #bar have focus now:
            bar.animate({ marginTop: -50 }, 250);
        }, 1);
    });

}());