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 上找到了这个解决方案。它对我有用:

Use jQuery to hide a DIV when the user clicks outside of it

Answer 1

您可以尝试监听 focusout 事件，然后检查当前具有焦点的元素是否是您容器的子元素，如下所示:

$('#boxA').on('focusout', function (e) {
    setTimeout(function () { // needed because nothing has focus during 'focusout'
        if ($(':focus').closest('#boxA').length <= 0) {
            hideFunction();
        }
    }, 0);
});