javascript - jQuery:检测焦点何时离开元素的子元素，然后将焦点返回给触发元素

Question

我有一个模态窗口脚本，我们正在尝试加快其速度以满足可访问性要求。该要求规定，当您离开窗口时，它应该关闭。它还表示，在关闭窗口后，原始触发元素必须重新获得焦点。

经过一番挖掘后，我发现了这个:jQuery figuring out if parent has lost 'focus' 。似乎判断何时离开窗口的最简单方法是跟踪 focusin 事件，并且当焦点在不是打开模式的子元素的元素上触发时，关闭窗口。然而，正如您所看到的，这种方法是有问题的(更不用说对我来说有点太重了)。这是处理此问题的代码:

$('body').focusin(function(e) {
        if (!$(e.target).parent().is('.current-window')) {
            closeModal();
        }
    });

以及关闭窗口的函数:

function closeModal() {
        $('.modal-mask, .current-window').fadeOut('fast', function(){
            $(this).removeClass('current-window');
            $('.modal-mask').removeAttr('style');
            $('.modal-trigger').focus();
        });
    }

现在显然，当我运行此代码时，closeModal() 在 focusin 事件之间来回触发直到最大调用堆栈，因此在将焦点给予触发元素之前抛出“超出最大调用堆栈”错误消息。

请参阅此 fiddle 以获取完整代码:http://jsfiddle.net/pbredenberg/wxX4T/

我正在尝试想出更好的方法来处理这个要求，或者至少避免无限循环。谁能指出我正确的方向？

Answer 1

我仍然无法发表评论，所以我必须将此作为答案提交:为什么不跟踪是否确实使用像 window.close 这样的 bool var 关闭窗口？我更新了示例:http://jsfiddle.net/kevkong/wxX4T/8/这是你打算做的吗？