jquery - JQuery でコンテナーと子要素がいつフォーカスを失ったかを検出する

Question

ユーザーが要素から離れた場所をクリックしたときに、HTML 要素とその子がいつフォーカスを失うかを判断したいと考えています。例えば：

<div id="boxA">
  <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
  </ul>
</div>
<div id="boxB">
...
</div>

現時点で私は持っています：

$("#boxA").live('blur', function() { hideFunction();  });

ただし、これは機能しません。ボックス A 内の任意の要素をクリックすると、フォーカスが失われますが、ボックス B がクリックされたとき、またはページ上の他の場所がクリックされたときにのみ発生するようにしたいと考えています。

編集と解決

このソリューションは Stack Overflow で見つけました。わたしにはできる：

score 2 · Accepted Answer

あなたのdivにtabindex属性を与えてみてください：

<div id="boxA" tabindex="0">
  <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
  </ul>
</div>
<div id="boxB" tabindex="1">
...
</div>

ドキュメントから：

最近のブラウザバージョンでは、要素の tabindex プロパティを明示的に設定することで、[focus] イベントを拡張してすべての要素タイプを含めることができます。要素は、Tab キーなどのキーボードコマンドを使用するか、要素をマウスでクリックすることによって、フォーカスを得ることができます。

score 0 · Accepted Answer

多分これらの線に沿った何か：

$('#boxA, #boxA > *').focusout(function () {
if ($(document.activeElement).closest('#boxA').length == 0){
    alert("not focused");
}
});

score 0 · Accepted Answer

これを試して、うまくいったかどうか教えてください：

$("body").not("#boxA, #boxA ul li").live('focus', function(){ hideFunction(); });

score -1 · Accepted Answer

この答えが言うように、を持つ要素はtabindexフォーカスを受け取ることができます。おそらくそれがあなたの答えです。

5 に答える 5