web-dev-qa-db-ja.com

jQuery Dialog ESCキーイベントをインターセプトする方法は？

モーダルjQueryダイアログと、ダイアログの背後にあるESCキーイベントを受け取る別の要素があります。 jQueryダイアログが起動しているときに、このESCキーイベントを伝播させたくありません。ここで何が起こるかというと、ESCをクリックすると、ダイアログが閉じて、背景要素でESCイベントハンドラーがトリガーされます。

JQueryダイアログが閉じられたときにESCキーイベントを食べるにはどうすればよいですか？

jqueryjquery-uijquery-ui-dialog
13
louis.luo

内部的には、jQueryUIのダイアログのcloseOnEscapeオプションは、キーダウンリスナーをドキュメント自体にアタッチすることで実装されます。したがって、キーダウンイベントがトップレベルまでバブルすると、ダイアログは閉じます。

したがって、エスケープキーを使用してダイアログを閉じ続け、エスケープキーが親ノードに伝播しないようにする場合は、closeOnEscape機能を自分で実装するとともに、を利用する必要があります。イベントオブジェクトのstopPropagationメソッド（ event.stopPropagationに関するMDNの記事 を参照）。

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

これは、ダイアログ内で発生するすべてのキーダウンイベントをリッスンします。押されたキーがEscキーの場合は、通常どおりダイアログを閉じます。evt.stopPropagation呼び出しは、キーダウンが親ノードにバブリングするのを防ぎます。

ここにこれを示す実例があります- http://jsfiddle.net/ud9KL/2/ 。

22
TJ VanToll

CloseOnEscapeが必要です...

コード例：

$(function() {
$("#popup").dialog({
height: 200,
width: 400,
resizable: false,
autoOpen: true,
modal: true,
closeOnEscape: false
});
});

ライブでご覧ください： http://jsfiddle.net/vutdV/

18
andyderuyter

あなたは以下を使うことができます

    $(document).keyup(function (e) {
        if (e.keyCode == 27) {

            $('#YourDialogID').dialog('close')  
        }
    });
4
Adel

ダイアログが開いていて、Escキーが押されているかどうかを確認し、その状況を無視するには、ダイアログの背後にある要素のコードを変更する必要があります。

0
j08691