禁用 esc 按键以进行 aui 对话答案

【问题标题】：Disable on esc key press for aui dialogue禁用 esc 按键以进行 aui 对话
【发布时间】：2016-02-02 05:51:14
【问题描述】：

在 Alloy UI 版本是 2.0。有什么方法可以防止按下 esc 键时关闭对话框？

【问题讨论】：

【解决方案1】：

一种方法是监听 ESC 按下并防止对话框隐藏：

Y.one('body').on('key', function(event) {
    modal.once('visibleChange', function(event) {
        if (event.prevVal === true) {
            event.newVal = true;
        }
    });
}, 'esc');

上面的代码将一个一次性的 visibleChange 监听器附加到模态框，以确保在按下 ESC 后它仍然可见。否则，对话框可以正常隐藏。

如果用户按下 ESC 并立即按下 X 按钮，这可能会产生竞争条件。我不确定在这种情况下对话框是否会关闭，但似乎风险很低。

可运行示例：

YUI().use('aui-modal', function(Y) {

  var modal = new Y.Modal({
    bodyContent: 'Modal body',
    centered: true,
    headerContent: '<h3>Modal header</h3>',
    modal: true,
    render: '#modal',
    width: 450
  }).render();

  Y.one('body').on('key', function(event) {
    modal.once('visibleChange', function(event) {
      if (event.prevVal === true) {
        event.newVal = true;
      }
    });
  }, 'esc');
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="modal"></div>
</div>

【讨论】：

我使用的不是模态的 AUI 对话框
原理是一样的，上面的代码你用aui-dialog试过了吗？