it-swarm.com.ru

Как перехватить событие ключа jQuery Dialog ESC?

У меня есть модальное диалоговое окно jQuery и другой элемент, который принимает событие ESC key за диалогом. Когда диалог jQuery запущен, я не хочу, чтобы это событие клавиши ESC распространялось. Что происходит сейчас, так это то, что когда я нажимаю ESC, он закрывает диалоговое окно и запускает обработчик событий ESC на элементе background.

Как я могу съесть событие ESC key, когда диалог jQuery закрыт?

12
louis.luo

Внутренняя опция closeOnEscape диалогового окна пользовательского интерфейса jQuery реализуется путем присоединения слушателя keydown к самому документу. Поэтому диалоговое окно закрывается после того, как событие keydown прошло весь путь до верхнего уровня.

Поэтому, если вы хотите продолжать использовать клавишу escape, чтобы закрыть диалоговое окно, и хотите, чтобы ключ escape не распространялся на родительские узлы, вам необходимо самостоятельно реализовать функциональность closeOnEscape, а также использовать метод stopPropagation в объект события (см. статью MDN по event.stopPropagation ).

(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/ .

20
TJ VanToll

Вам нужно закрытьOEEscape ...

Пример кода:

$(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

Вам нужно будет изменить код для вашего элемента за диалогом, чтобы увидеть, был ли диалог открыт, и была ли нажата клавиша выхода и игнорировать эту ситуацию.

0
j08691