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或页面上的任何其他位置时发生。

编辑＆amp;溶液

我在Stack Overflow上找到了这个解决方案。它对我有用：

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

Answer 1

尝试为您的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键，或者通过鼠标点击元素。

Answer 2

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

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

Answer 3

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

Which HTML elements can receive focus?

Answer 4

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

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

Answer 5

也许是这些方面的东西：

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

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

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

5 个答案: