检测元素外部的孩子何时获得焦点

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

由于blur事件会在focus事件触发之前触发，您应该在blur事件中设置超时，并在{{focus事件中取消1}}事件。

(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);
    });

}());

Answer 2

这样做：

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/