要素外の子がフォーカスを取得したときの検出

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

のようなので、それを実行します。この1つはフォーカスを持っているかもしれないすべてのanchorsを照会

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

を.lengthがゼロであれば、私たちは今、そのバーを非表示にできることを知っている必要があります。私はまだそのコードをテストしていない、私に教えてください。

はhttp://api.jquery.com/focus-selector/

例を参照してください：http://jsfiddle.net/e4PaN/