更新 2:
私はそれで寝てから、いくつかのサンプルコードを作成して、問題をさらに解明しようとしました.
次の例では、firebug の console.log を使用して、どのオブジェクトが focusin イベントをトリガーしているかを示しています。
1) 最初のリンクをクリックします: 黄色の div が表示されます 2) タブ キーを押します: 黄色の div 内のリンクに移動します
それはそれを行いますが、その後 focusin イベントをトリガーし、何らかの理由で、黄色の div を閉じるように指示された赤い div に再びバブルアップするように見えます。
これは、黄色の div に focusin イベントを伝播しないように指示した後でもあります。
$('#innerDiv').focusin(function(e){e.stopPropagation()});
次に、内側の div にフォーカスした後にのみ、親 div に focusin イベントをアタッチしようとしました。
そこで何が起こるかというと、内側の div の最初のリンクにタブで移動すると、親の div に focusin イベントが設定されます。これはいい！しかし、その後、innerdiv 内の次のリンクにタブで移動すると、focusin イベントが再度発生し、div が閉じられます。
だから、私はまだ困惑していると思います。フォーカスインの泡立ちを止めることはできないようです。考え？理論？
以下、元記事...
============================
onclick イベントを介して div を表示しています。divの外をクリックしたら非表示にしたい。そのために、ボディに 1 回限りのクリック イベントをバインドします。
$('body').one('click.myDivPopup', function(e) {
...close my div...
});
div 自体の中で、実際に div 内をクリックしても body のクリックがトリガーされないように、イベントを伝播しないように指示します。
$myDiv.click(function(e){e.stopPropagation()});
これは意図したとおりにうまく機能します。
divからタブを外すと、divも非表示にしたいと思います。
私の考えでは、そのシナリオでは、ボディに focusin イベントを使用できます。
$('body').one('focusin.myDivPopup', function(e) {
...close my div...
});
繰り返しますが、イベントが div 自体から飛び出してほしくないので、これを追加しました:
$myDiv.focusin(function(e){e.preventDefault()});
これは動作しません。myDiv 内の要素内でフォーカスを変更すると、body で focusin イベントがトリガーされます。
これはおそらくjQueryのバグですか？もしそうなら、これを達成するためのより良い方法はありますか?
アップデート：
問題は、DIV がフォーカスを持つことができないため、DIV がフォーカスを失ったかどうかを判断する方法がないように思われることです。私の解決策のロジックは、何か ELSE が div の外側にあるフォーカスを持っているかどうかを確認することでした (したがって、focusin を使用しています) が、div 内の focusin イベントの問題が発生しているように見えます。
今のところ、私の解決策は、ポップアップに CLOSE 要素を追加し、それを明示的にトリガーする必要があると思います。ただし、特にキーボード ナビゲーションには理想的ではありません。