檢測元素以外的孩子何時獲得焦點

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

(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/