jQuery 如何拦截jQuery Dialog ESC键事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10466726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to intercept jQuery Dialog ESC key event?
提问by louis.luo
I have a modal jQuery dialog and another element that takes the ESC key event behind the dialog. When the jQuery Dialog is up, I don't want this ESC key event to propagate. What happens now is that when I click on ESC, it will close the dialog and trigger the ESC event handler on the background element.
我有一个模态 jQuery 对话框和另一个在对话框后面接受 ESC 键事件的元素。当 jQuery Dialog 启动时，我不希望这个 ESC 键事件传播。现在发生的是，当我单击 ESC 时，它将关闭对话框并触发背景元素上的 ESC 事件处理程序。
How do I eat the ESC key event when a jQuery dialog is dismissed?
关闭 jQuery 对话框时如何处理 ESC 键事件？
回答by TJ VanToll
Internally jQuery UI's dialog's closeOnEscapeoption is implemented by attaching a keydown listener to the document itself. Therefore, the dialog is closed once the keydown event has bubbled all the way to the top level.
在内部，jQuery UI 的对话框closeOnEscape选项是通过将 keydown 侦听器附加到文档本身来实现的。因此，一旦 keydown 事件一直冒泡到顶层，对话框就会关闭。
So if you want to keep using the escape key to close the dialog, and you want to keep the escape key from propagating to parent nodes, you'll need to implement the closeOnEscapefunctionality yourself as well as making use of the stopPropagationmethod on the event object (see MDN article on event.stopPropagation).
因此，如果您想继续使用转义键关闭对话框，并且想让转义键不传播到父节点，则需要自己实现该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();
});
}());
What this does is listen for all keydown events that occur within the dialog. If the key pressed was the escape key you close the dialog as normal, and no matter what the evt.stopPropagationcall keeps the keydown from bubbling up to parent nodes.
它的作用是侦听对话框中发生的所有 keydown 事件。如果按下的键是转义键，您可以正常关闭对话框，无论evt.stopPropagation调用什么，都可以防止 keydown 冒泡到父节点。
I have a live example showing this here - http://jsfiddle.net/ud9KL/2/.
我在这里有一个现场示例 - http://jsfiddle.net/ud9KL/2/。
回答by andyderuyter
You need closeOnEscape...
你需要 closeOnEscape ......
Example code:
示例代码：
$(function() {
$("#popup").dialog({
height: 200,
width: 400,
resizable: false,
autoOpen: true,
modal: true,
closeOnEscape: false
});
});
See it live: http://jsfiddle.net/vutdV/
现场观看：http: //jsfiddle.net/vutdV/
回答by Adel
You can use the following
您可以使用以下
$(document).keyup(function (e) {
if (e.keyCode == 27) {
$('#YourDialogID').dialog('close')
}
});
回答by j08691
You would need to modify the code for your element behind the dialog to see if the dialog was open AND the escape key was pressed and to ignore that situation.
您需要修改对话框后面元素的代码，以查看对话框是否已打开并且是否按下了转义键并忽略该情况。
