Question

实际上，jQuery中存在（仍然）错误：http://bugs.jqueryui.com/ticket/4511。

此行为的原因（来自错误描述注释）：“对话框本身将keydown事件绑定到自身以关闭 ESC 上的对话框;此外，对话框覆盖将keydown事件绑定到文档，没有过滤只关闭活动对话框。“

我无法想出一个可接受的解决方法。有没有人不得不处理它呢？

Answer 1

非常简单 - 在创建模态对话框时，运行以下命令：

$([document, window]).unbind('.dialog-overlay');

如果您创建了多个模态对话框，点击 ESC 将仅关闭顶部对话框。然后，一旦你专注于底部对话框，点击 ESC ，它也将关闭它。

希望这有帮助！

P.S。当你想要在点击 ESC 键时立即关闭所有对话框或仅关注那些对话框时，jQuery UI开发人员应该添加一个选项。

Answer 2

最简单的事情是我在jquery.ui.dialog.js文件中的event.stopPropagation();之前的close函数中添加了return self;。我完成了关于转义keydown逐个关闭对话框的问题。如果有人找到更好的解决方案，请告诉我。

EDITED：这需要添加因为单击关闭按钮事件对象是未定义的。

if（typeof event！='undefined'）{ event.stopPropagation（）; }

Answer 3

问题的根源是jQuery UI keydown事件在所有对话框中传播。原始jQueryUI对话框代码中的修复是在最顶层对话框成功关闭时添加event.stopPropagation()并在同一个keydown事件开始时检查event.isPropagationStopped()。

作为我做过的解决方法，感谢Jazzer，以下内容。

将对话框选项closeOnEscape设置为false

创建对话框后，追加：

//newDialog is dialog's content, e.g. var newDialog = $('my dialog content>');
newDialog.keydown(function(event) {
     if (mydialogs.hasOpenDialogs() && 
         event.keyCode && 
         event.keyCode === $.ui.keyCode.ESCAPE) {
                        $(newDialog).dialog("close");
                        event.preventDefault();

                        event.stopPropagation();
    }
});

加载文档时：

$(function(){
//allow for ESC to close only top dialog
$(document).bind('keydown', function(event) {
    if (event.isPropagationStopped()) return true;
    if (mydialogs.hasOpenDialogs() && 
        event.keyCode && 
        event.keyCode === $.ui.keyCode.ESCAPE) {
                        mydialogs.closeTopDialog();
                        event.preventDefault();
                        event.stopPropagation();
    }
});
});

当用户在对话框内的输入框中键入文本时命中 ESC 时，会发生（2）中的事件。当用户在其他地方点击 ESC 时，会发生（3）中的事件。

mydialogs这里是模式对话框的堆栈（数组）的包装器，其中每个新对话框都通过.push()自我添加，.close()中的.pop()移除自身。< / p>

单个ESC关闭jQuery UI中的所有模态对话框。解决方法？

3 个答案: