Dojo - エスケープ・キー・プレスでdijit/popup cancelを無効にする

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(){ 
    } 
}); 

... 

ポップアップウィジェットは、そのキャンセルを通知するとき、またはESCときのdijit /ポップアップのデフォルトの動作は、どちらかonCancelコールバック関数を呼び出すことですがキーが押された：ときESCAP

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

私はこの出来事を見ることができますeキーが押されていますが、ESC（またはTAB）キーを押してダイアログを閉じないようにしたいのですが、どうしたらいいですか？ユーザーがEscキーを押した結果、onCancelコールバックが実行されたときを検出するにはどうすればよいですか？

また、エスケープキーが押されたときにのみ、onCancelを呼び出すdijit/popupの防止方法を教えてください。

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）を外側から隠す必要があります。 何も抑制/上書きする必要はありません。