如何拦截jQuery Dialog ESC键事件？

Question

我有一个模态jQuery对话框和另一个在对话框后面接受ESC键事件的元素.当jQuery对话框启动时,我不希望传播这个ESC键事件.现在发生的是当我点击ESC时,它将关闭对话框并触发背景元素上的ESC事件处理程序.

当jQuery对话框被解除时,如何吃ESC键事件？

Answer 1

内部jQuery UI的对话框closeOnEscape选项是通过将keydown侦听器附加到文档本身来实现的.因此,一旦keydown事件一直冒泡到顶层,对话框就会关闭.

因此,如果您希望继续使用转义键来关闭对话框,并且希望保持转义键不会传播到父节点,则需要自己实现该closeOnEscape功能以及stopPropagation在事件对象上使用该方法(请参阅有关event.stopPropagation的MDN文章).

(function() {
  var dialog = $('whatever-selector-you-need')
    .dialog()
    .on('keydown', function(evt) {
        if (evt.keyCode === $.ui.keyCode.ESCAPE) {
            dialog.dialog('close');
        }                
        evt.stopPropagation();
    });
}());

这样做是为了侦听对话框中发生的所有keydown事件.如果按下的键是转义键,则正常关闭对话框,无论evt.stopPropagation调用是什么,keydown都不会冒泡到父节点.

我有一个现场示例显示这里 - http://jsfiddle.net/ud9KL/2/.

Answer 2

你需要closeOnEscape ......

示例代码:

$(function() {
$("#popup").dialog({
height: 200,
width: 400,
resizable: false,
autoOpen: true,
modal: true,
closeOnEscape: false
});
});

现场观看:http://jsfiddle.net/vutdV/

Answer 3

您可以使用以下

    $(document).keyup(function (e) {
        if (e.keyCode == 27) {

            $('#YourDialogID').dialog('close')  
        }
    });