更新 2:
我睡在上面,然后编写了一些示例代码来尝试进一步找出问题所在。
这是一个使用 firebug 的 console.log 的示例,向您展示哪个对象触发了 focusin 事件:
1)点击第一个链接:黄色div显示2)点击tab键:它应该进入黄色div内的链接
它这样做了,但随后它触发了 focusin 事件,并且由于某种原因,它似乎再次冒泡到红色 div,然后被告知关闭黄色 div。
这甚至在我告诉黄色 div 不要传播焦点事件之后:
$('#innerDiv').focusin(function(e){e.stopPropagation()});
然后,我仅在关注内部 div 之后尝试将 focusin 事件附加到父 div 上。
发生的情况是,在内部 div 中的第一个链接上的选项卡确实在父 div 上设置了 focusin 事件。这很好!但是,然后在 innerdiv 中的下一个链接中跳出 focusin 事件再次关闭 div。
所以,我想我仍然很难过。看来我无法阻止专注于冒泡。想法?理论?
下面是原帖...
==============================
我正在通过 onclick 事件显示一个 div。如果您单击 div 外部,我想隐藏它。为此,我在正文上绑定了一次单击事件:
$('body').one('click.myDivPopup', function(e) {
...close my div...
});
在 div 本身中,我告诉它不要传播事件,以便在 div 中实际单击不会触发对主体的单击:
$myDiv.click(function(e){e.stopPropagation()});
这按预期工作正常。
如果 div 中有一个标签,我也想隐藏 div。
我的想法是,在那种情况下,我可以在 body 上使用 focusin 事件:
$('body').one('focusin.myDivPopup', function(e) {
...close my div...
});
同样,我不希望事件从 div 本身中冒出来,所以添加了这个:
$myDiv.focusin(function(e){e.preventDefault()});
这不起作用。在 myDiv 中更改元素内的焦点会触发 body 上的 focusin 事件。
这可能是 jQuery 中的错误吗?如果是这样,有没有更好的方法来实现这一点?
更新:
问题似乎是似乎没有办法确定 DIV 是否失去焦点,因为它永远不会有焦点。我的解决方案逻辑是查看 ELSE 的焦点是否在 div 之外(因此使用 focusin),但我遇到了 div 中的 focusin 事件似乎通过在身体上触发而冒泡的问题。
现在,我认为我的解决方案必须是在弹出窗口中添加一个 CLOSE 元素,然后让人们必须明确地触发它。但并不理想,尤其是对于键盘导航。