我希望确定当用户点击离开元素时，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 上找到了这个解决方案。这个对我有用：
您可以尝试侦听该focusout事件，然后检查当前具有焦点的元素是否是您的容器的子元素，如下所示：
$('#boxA').on('focusout', function (e) {
setTimeout(function () { // needed because nothing has focus during 'focusout'
if ($(':focus').closest('#boxA').length <= 0) {
hideFunction();
}
}, 0);
});
尝试给你的 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 键）或通过鼠标单击元素获得焦点。
也许是这样的：
$('#boxA, #boxA > *').focusout(function () {
if ($(document.activeElement).closest('#boxA').length == 0){
alert("not focused");
}
});
试试这个，告诉我它是否有效：
$("body").not("#boxA, #boxA ul li").live('focus', function(){ hideFunction(); });
正如这个答案所说，任何带有 a 的元素tabindex都可以获得焦点，也许这就是你的答案。