我有一个模态窗口脚本,我们正在努力提高可访问性要求的速度。该要求说,当您离开窗口时,它应该关闭。它还说,在关闭窗口时,原始触发元素必须重新获得焦点。
在做了一些挖掘之后,我发现了这个:jQuery figuring 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 事件与最大调用堆栈之间来回触发,因此在将焦点赋予触发元素之前抛出“超出最大调用堆栈”错误消息。
有关完整代码,请参阅此小提琴:http: //jsfiddle.net/pbredenberg/wxX4T/
我试图想出一种更好的方法来处理这个要求,或者至少避免无限循环。谁能指出我正确的方向?