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）按键关闭对话框 - 我怎样才能实现这一点？如何在用户按Esc键的情况下检测onCancel回调的执行时间？

或者，只有在按下转义键时才能阻止dijit / popup调用onCancel？

Answer 1

似乎没有干净的方法来做到这一点。您可以做的是禁止弹出/下拉列表的转义键事件。要执行此操作，必须在显示弹出窗口后设置键处理程序。要执行此操作，您需要打开弹出窗口的函数名称，并且需要访问弹出窗口本身或其父窗口。请注意，弹出窗口位于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）。

Answer 2

简单方法：确保this.domNode是常规DIV元素。创建连接到此domNode的onClick侦听器，以显示弹出窗口。像这样创建的弹出窗口将忽略ESC按钮或用户点击弹出窗口周围的空白区域。您必须通过弹出窗口中的popup.close（this）或外部的popup.close（this.dropDown）自行隐藏它。无需压制/覆盖任何内容。

Dojo - 在转义键按下时阻止dijit / popup取消

2 个答案: