jQuery找出父母是否失去了'焦点'

Question

我一直想弄清楚使下拉菜单键盘可访问的逻辑。

HTML是这样构造的（为清楚起见，使用了额外的类名：]

<ul>
    <li class="primaryMenuItem">
        <a href="">Link 1</a>
        <ul class="popUpMenu">
            <li><a href="">Sub Link 1</a></li>
            <li><a href="">Sub Link 2</a></li>
        </ul>
    </li>
    <li class="primaryMenuItem">
        <a href="">Link 2</a>
        <ul class="popUpMenu">
            <li><a href="">Sub Link 1</a></li>
            <li><a href="">Sub Link 2</a></li>
        </ul>
    </li>    
</ul>

链接1和链接2，当悬停时，将显示子菜单列表（下拉菜单）。我可以使用某些jQuery和jQuery hoverIntent插件正常工作。

收获的是，此操作目前仅适用于鼠标。

下一个挑战是通过键盘使其正常工作。

我可以轻松地将焦点事件添加到顶级链接，然后触发辅助菜单：

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

效果很好。

要关闭菜单，一个选项是，当打开另一个菜单时，请检查是否已经有另一个打开，如果是，则将其关闭。

也可以。

然而，如果您打开了最后一个菜单，然后从中跳出，则失败。由于您尚未选择其他菜单，因此该菜单保持打开状态。

挑战是弄清楚如何/何时关闭菜单，以及找出所需的逻辑（jQuery）。理想情况下，当焦点位于页面上除菜单子元素之外的任何其他元素上时，我将关闭菜单。

逻辑上，我正在寻找：

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))

但是，您不能这样做，因为LI实际上没有焦点，而是其中的定位标记。

有什么建议吗？

更新：

也许是更好/更简单的方法来提出问题：

通过jQuery，有没有一种方法可以“观察”以查看焦点是否已移出特定对象的所有子对象？

Answer 1

您可以使用事件冒泡检查关注focusin事件的内容。我成功完成了以下代码：

Answer 2

使用新的jquery 1.4函数：focusin和focusin而不是focusout和focusout。 blur的区别如下：

Answer 3

如何执行以下操作：

Answer 4

尝试一下

Answer 5

这帮助了我... $('li.primaryMenuItem:last').bind('myblur', function() ...);

Answer 6

我有一个类似的问题...我创建了一个jsfiddle来确定父字段集何时失去焦点，然后调用一个函数。当然可以对其进行优化，但这只是一个开始。

Answer 7

我想出了这个配方（香草JS），它完全符合OP的要求（提供一种监听“容器元素外部的焦点移动”的方法，并且通用性足以适用于任何用例。