jQuery UI modal-dialog：当对话框打开时防止按键被按下答案

【问题标题】：jQuery UI modal-dialog: Prevent keypressed when dialog is openjQuery UI modal-dialog：当对话框打开时防止按键被按下
【发布时间】：2014-07-24 19:26:43
【问题描述】：

我正在使用 jquery-ui modal，我的应用程序使用了几个绑定到 modal-dialogs 的热键。

这是我的工作jsfiddle example 和代码：

$(document).keypress(function(e){console.log("pressed a key: " + e.which);})
var dialog = $('#modal-dialog')
    .dialog({ modal: true, autoOpen: false, buttons: [{text:"ok"}] });
    .keypress(function(e){console.log("cought!"); e.stopPropagation()})
$("#bt").click(function(){dialog.dialog("open")})

当一个模态对话框打开时，它应该禁止按键事件沿着 Dom-tree 传播到文档/窗口。当输入元素具有焦点（不适用于按钮）时，stopPropagation 启动。否则会传播事件。

解决这个问题的最佳方法是什么？

【问题讨论】：

我注意到 keydown、keyup 和 keypress 事件通常被模态对话框阻止，但如果 RETURN 或 ESCAPE 导致对话框关闭，那么 KEYUP 事件会在 DOM 中触发，因为对话框在 KEYDOWN 事件时关闭。

标签： jquery jquery-ui event-handling modal-dialog jquery-ui-dialog

【解决方案1】：

你可以在对话框打开时unbind$(document).keypress事件，在对话框关闭时再次bind$(document).keypress。

这里是DEMO

js代码：

function bind_event()
{
    $(document).keypress(function(e){console.log("pressed a key: " + e.which);});
}
function unbind_event()
{
    $(document).unbind('keypress');
}
$(document).ready(function(){
    bind_event();

var dialog = $('#modal-dialog')
    .dialog({ 
        modal: true, autoOpen: false, buttons: [{text:"ok"}],
        open: function( event, ui ) {
            unbind_event();
            /*$(document).keypress(function(e){
                console.log('dialog open '+e.which);
            });*/
        },
        close: function( event, ui ) {
            bind_event();
        }
    })
    .keypress(function(e){
        console.log("cought!"); 
        e.stopPropagation()
    })
$("#bt").click(function(){dialog.dialog("open")});
});

【讨论】：

使用这种方法，我必须临时保存绑定到按键的函数，以便在对话框关闭时可以再次绑定。这样做没有问题吗？

【解决方案2】：

一旦打开，创建对话框小部件的元素显然会从 DOM 树中删除，并且 jQuery 会插入一个可由对话框小部件方法访问的新元素。该元素是需要停止传播的元素。无论如何，从技术上讲，模态覆盖也必须考虑在内。

$(document).keydown(function(e){console.log("pressed a key: " + e.which);})
var dialog = $('#modal-dialog')
    .dialog({ modal: true, autoOpen: false, buttons: [{text:"ok"}] });
$("#bt").click(function(){
    dialog.dialog("open")
    .dialog("widget")
    .keydown(function(e){console.log("cought!"); e.stopPropagation()})
})

【讨论】：