jquery - 如何拦截jQuery对话框ESC键事件？

Question

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

当 jQuery 对话框关闭时，如何处理 ESC 键事件？

Answer 1

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

因此，如果您想继续使用转义键关闭对话框，并且希望阻止转义键传播到父节点，您需要自己实现 closeOnEscape 功能，如下所示以及在事件对象上使用 stopPropagation 方法(请参阅 MDN article on event.stopPropagation )。

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

它的作用是监听对话框中发生的所有按键事件。如果按下的键是转义键，您将像平常一样关闭对话框，并且无论 evt.stopPropagation 调用如何，都会阻止 keydown 向上冒泡到父节点。

我有一个生动的例子在这里展示了这一点 - http://jsfiddle.net/ud9KL/2/ .