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

Posted 2023-02-23

【中文标题】使用 JQuery 检测容器和子元素何时失去焦点

【英文标题】：Detect when container and child elements lose focus with 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> 元素？这不是表单域。

【参考方案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?