使用 JQuery 检测容器和子元素何时失去焦点答案

【问题标题】：Detect when container and child elements lose focus with JQuery使用 JQuery 检测容器和子元素何时失去焦点
【发布时间】：2012-11-07 12:51:51
【问题描述】：

我希望确定当用户点击离开该元素时，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

【问题讨论】：

您如何点击离开 <div> 元素？这不是表单域。

标签： jquery html focus blur

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试给你的 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>

来自文档：

在最近的浏览器版本中，[focus] 事件可以扩展为包括所有通过显式设置元素的 tabindex 属性来确定元素类型。元素可以通过键盘命令获得焦点，例如 Tab 键，或者通过鼠标点击元素。

【讨论】：

【解决方案3】：

试试这个，告诉我它是否有效：

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

【讨论】：

这不是答案，这应该是对问题的评论。
这是为什么呢？我提供了一个对我有用的替代方案。
您的回答听起来像是您自己没有尝试过。如果您将其改写为“这对我有用”，那么误导性会降低。

【解决方案4】：

也许是这样的：

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

http://jsfiddle.net/AjT9j/3/

【讨论】：

【解决方案5】：

正如这个答案所说，任何带有tabindex 的元素都可以接收焦点，也许这就是你的答案。

Which HTML elements can receive focus?

【讨论】：