javascript - 检测元素外的 child 何时获得焦点

Question

这是基本设置:我在网站顶部有一个细栏，其中包含与辅助功能相关的链接。如果启用了 javascript，则这是隐藏的(负边距)。但是，我想在用户点击链接时显示该栏。这是我正在做的:

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

行得通。然而，当谈到关闭这个栏时，它变得有点棘手。如果我将 blur 事件绑定(bind)到 a，当我通过 each 链接时，它将隐藏。我只想在所有链接模糊时隐藏它。

我想这样做:

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 事件中取消它。

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

}());