Как перехватить событие JQuery Dial Key ESC?

У меня есть модальный диалог jquery и еще один элемент, который принимает событие ESC за диалогом. Когда диалог jQuery активирован, я не хочу, чтобы это событие ESC было распространено. Теперь случается так, что когда я нажимаю на ESC, он закрывает диалог и запускает обработчик события ESC в фоновом элементе.Как перехватить событие JQuery Dial Key ESC?

Как я могу использовать событие ESC, когда диалог jQuery отклоняется?

источник

2012-05-05 louis.luo

Внутренне closeOnEscape вариант Диалог JQuery UI осуществлялются путем прикрепления KeyDown слушателя к самому документу , Поэтому диалог закрывается после того, как событие keydown всплыло до верхнего уровня.

Поэтому, если вы хотите использовать ключ-побег, чтобы закрыть диалоговое окно, и вы хотите, чтобы ключ-побег распространялся на родительские узлы, вам необходимо реализовать функцию closeOnEscape самостоятельно, а также использовать метод stopPropagation объекта события (см. MDN article on 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/.

источник

2012-05-06 12:38:06

Спасибо. Это работает. –

Это не работает, я добавил простое предупреждение в свой jsfiddle внутри функции keydown, и он никогда не вызван :( – Yasser

К сожалению, closeOnEscape не работает для меня. Но это привязка сделала трюк. –

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

источник

2012-05-05 23:14:50 j08691

Спасибо за ответ. Но дело в том, что когда я нажимаю ESC, событие переходит в диалог сначала и отклоняет диалог. Только тогда он переходит к моему фоновому элементу, который в этой точке узнает, что диалогового окна нет, и принять событие ESC. –

Как насчет удаления слушателя из фонового элемента при открытии диалога, а затем повторного подключения его после закрытия диалога? – j08691

Я предполагаю, что это сработает, но разве это не будет немного хаки? Будет ли менее хакерский способ сделать это? –

Вам нужно closeOnEscape ...

Пример кода:

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

Смотрите вживую: http://jsfiddle.net/vutdV/

источник

2012-05-05 23:27:16 andyderuyter

Он не сказал, что хочет, чтобы диалог не закрылся при побеге, он сказал, что не хочет, чтобы другой элемент слушал, как побег игнорирует его, если диалог открыт. Ваш путь позволит удалить функциональность закрытия диалогового окна, нажав кнопку escape. – j08691

Уу есть там пункт. Я отредактировал ярлыки стиля, так что все еще существует «близкая» ссылка. http://jsfiddle.net/vutdV/1/ Все еще не окончательное решение. – andyderuyter

Вы можете использовать следующие

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

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

источник

2013-11-18 11:30:16 Adel

Как перехватить событие JQuery Dial Key ESC?

ответ

Смежные вопросы