javascript – 检测元素外部的子节点何时获得焦点

2023年5月20日 170次阅读

以下是基本设置：我在网站顶部有一个包含辅助功能相关链接的细条.如果启用了
javascript,则会隐藏(负边距).但是,每当用户选中链接时,我都会显示该栏.这是我正在做的事情：

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

这样可行.但是,当关闭这个栏时,它有点棘手.如果我将模糊事件绑定到a,它会在我通过每个链接进行选项卡时隐藏.我只想在所有链接都模糊时隐藏它.

我想这样做：

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

怎么样？

最佳答案 因为模糊事件在焦点事件触发之前触发,所以您应该在模糊事件中设置超时,并在焦点事件中取消它.

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

}());
点赞