Mam okno dialogowe modalnych jquery i inny element, który bierze klucz ESC zdarzenia za dialog. Kiedy okno dialogowe jQuery działa, nie chcę, aby to wydarzenie klucza ESC było propagowane. Teraz po kliknięciu ESC zamknie się okno dialogowe i uruchomi procedurę obsługi zdarzeń ESC na elemencie tła.Jak przechwycić kluczowe zdarzenie jQuery Dialog ESC?
Jak jeść wydarzenie kluczowe ESC, gdy okno dialogowe jQuery zostanie odrzucone?
Wewnętrznie closeOnEscape opcja jQuery UI za dialogowego jest realizowany poprzez dołączenie keyDown słuchacza do samego dokumentu . Dlatego okno dialogowe jest zamykane, gdy zdarzenie keydown przeplata się do samego najwyższego poziomu.
Jeśli więc chcesz nadal używać klawisza escape, aby zamknąć okno dialogowe i chcesz, aby klucz escape nie był propagowany do węzłów nadrzędnych, musisz samodzielnie wdrożyć funkcję closeOnEscape, a także korzystać z funkcji metoda stopPropagation na obiekcie zdarzenia (patrz 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();
});
}());
To, co robi, to nasłuchiwanie wszystkich zdarzeń kluczowych pojawiających się w oknie dialogowym. Jeśli wciśnięty klawisz był klawiszem Escape, zamknąłeś to okno dialogowe w normalny sposób i niezależnie od tego, co wywołuje evt.stopPropagation, klucz keydown nie jest przepuszczany przez węzły nadrzędne.
Mam na żywo przykład pokazujący tutaj - http://jsfiddle.net/ud9KL/2/.
Będziesz musiał zmodyfikować kod elementu za oknem dialogowym, aby sprawdzić, czy okno dialogowe było otwarte ORAZ naciśnięto klawisz Escape i zignorować tę sytuację.
Dzięki za odpowiedź. Ale chodzi o to, że kiedy uderzę w ESC, zdarzenie najpierw przechodzi do dialogu i odrzuca okno dialogowe. Dopiero wtedy przechodzi do mojego elementu tła, który w punkcie dowie się, że nie ma tam okna dialogowego i bierze się zdarzenie ESC. –
Co powiesz na usunięcie detektora z elementu tła po otwarciu okna dialogowego, a następnie ponowne załączenie go po zamknięciu okna dialogowego? – j08691
Myślę, że to zadziała, ale czy nie byłoby to trochę hacky? Czy będzie to mniej hackowy sposób na zrobienie tego? –
Trzeba closeOnEscape ...
Przykładowy kod:
$(function() {
$("#popup").dialog({
height: 200,
width: 400,
resizable: false,
autoOpen: true,
modal: true,
closeOnEscape: false
});
});
Zobacz na żywo: http://jsfiddle.net/vutdV/
Nie powiedział, że chce, żeby dialog nie zamykał się w ucieczce, powiedział, że nie chce, aby drugi element, który nasłuchuje, zignorował go, gdy okno dialogowe jest otwarte. Twoja metoda usunie funkcję zamykania okna dialogowego przez naciśnięcie klawisza escape. – j08691
Masz punkt. Edytowałem znaczniki stylu, więc nadal dostępny jest link "close". http://jsfiddle.net/vutdV/1/ Nadal nie jest to ostateczne rozwiązanie. – andyderuyter
Można użyć następujących
$(document).keyup(function (e) {
if (e.keyCode == 27) {
$('#YourDialogID').dialog('close')
}
});
Dzięki. To działa. –
to nie działa, dodałem prosty alert w twoim jsfiddle wewnątrz funkcji keydown i to nigdy nie jest wywoływane :( – Yasser
Niestety closeOnEscape nie działa dla mnie, ale to wiązało się ze sztuczką –