Question

我正在使用jquery-ui模式，我的应用程序使用绑定到模态对话框的几个热键。

这是我的工作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会启动。否则会传播事件。

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

Answer 1

当对话框打开时，您可以发生unbind $(document).keypress个事件，当对话框关闭时，您可以再次bind $(document).keypress。

以下是 DEMO

js code：

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")});
});

Answer 2

一旦打开，对话框小部件的元素显然是从DOM树中删除的，jQuery插入了一个可由对话框widget-method访问的新元素。元素是需要停止传播的元素。无论如何，技术上也必须考虑模态叠加。

$(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()})
})

jQuery UI模式对话框：当对话框打开时，防止按下按键

2 个答案: