15

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

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

4

5 に答える 5

23

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

そのため、ダイアログを閉じるためにエスケープ キーを使用し続けたい場合、およびエスケープ キーが親ノードに伝播しないようにしたい場合は、イベント オブジェクトでメソッド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();
    });
}());

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

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

于 2012-05-06T12:38:06.697 に答える
19

closeOnEscape が必要です...

コード例:

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

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

于 2012-05-05T23:27:16.953 に答える
0

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

于 2012-05-05T23:14:50.603 に答える