javascript - Dojo - 防止按下转义键时 dijit/popup 取消

Question

我使用 dijit/popup 在单击按钮时显示对话框小部件。下面的文档描述了如何使用 dijit/popup 来控制弹出窗口。

https://dojotoolkit.org/reference-guide/1.10/dijit/popup.html

代码如下:

define(["dijit/popup"], function(popup){
...

// wrap the pop-up widget and position it offscreen so
// that it can be measured by the widget’s startup method
popup.moveOffScreen(dropDown);

// if the pop-up has not been started yet, start it now
if(dropDown.startup && !dropDown._started){
    dropDown.startup();
}

// make the pop-up appear around my node
popup.open({
    parent: this,
    popup: dropDown,
    around: this.domNode,
    orient: ["below-centered", "above-centered"],
    onExecute: function(){
        popup.close(dropDown);
    },
    onCancel: function(){
        popup.close(dropDown);
    },
    onClose: function(){
    }
});

...

然而，dijit/popup 的默认行为是在弹出的小部件发出取消信号或按下 ESC 键时调用 onCancel 回调函数:

https://dojotoolkit.org/reference-guide/1.10/dijit/popup.html#keyboard-handling

我可以在按下 ESCape 键时看到这种情况发生，但是我不希望对话框因 ESC(或 TAB)键按下而关闭 - 我该如何实现？如何检测因用户按下 Escape 键而执行 onCancel 回调的时间？

或者，如何防止 dijit/popup 仅在按下转义键时调用 onCancel？

Answer 1

似乎没有干净的方法可以做到这一点。您可以做的是抑制弹出/下拉菜单的转义键事件。为此，您必须在显示弹出窗口后设置一个 key 处理程序。为此，您需要打开弹出窗口的函数名称，并且需要访问弹出窗口本身或其父窗口。请注意，弹出窗口放置在 DOM 中的随机位置，而不是打开/删除它的小部件的子项。例如，DateTextBox 调用 openDropDown 函数来打开它的日历小部件并将其存储在成员 dropDown 中。您可以抑制按键事件，这样下拉菜单就不会像这样使用转义键关闭:

require([
    "dijit/form/DateTextBox",
    "dojo/aspect",
    "dojo/on",
    "dojo/keys",
    "dojo/domReady!"
], function(DateTextBox, aspect, on, keys){

    var dateBox = new DateTextBox({});
    aspect.after(dateBox, "openDropDown", function () {
        on(this.dropDown, "keydown", function(event)
        {
            if (event.keyCode == keys.ESCAPE)
            {
                event.stopPropagation();
                event.preventDefault();
                return;
            }
        });
    });
    dateBox.placeAt("datebox");
    dateBox.startup();
});

您可能需要向弹出窗口添加一个附加函数(或现有函数的一个方面)以在弹出窗口打开后显示该弹出窗口(相当于上面代码段中的 this.dropDown)。