Używam tego kodu:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
A ten HTML :
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
Problem polega na tym, że mam linki wewnątrz div
i kiedy przestają działać po kliknięciu.
$('html')
lub$(document)
byłoby lepiej niż$('body')
Odpowiedzi:
Miałem ten sam problem, wymyśliłem to łatwe rozwiązanie. Działa nawet rekurencyjnie:
źródło
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
tuż obok.hide()
. Więcdocument
nie słuchaj kliknięć.$(document).on("mouseup.hideDocClick", function () { ... });
w funkcji otwierającej kontener oraz$(document).off('.hideDocClick');
w funkcji ukrywania. Używając przestrzeni nazw nie usuwam innych możliwychmouseup
nasłuchiwaczy dołączonych do dokumentu.Lepiej skorzystaj z czegoś takiego:
źródło
hover
obsługę zdarzeń, która otwiera wiele możliwości.(function() { // ... code })();
Nie pamiętam nazwy tego wzoru, ale jest to bardzo przydatne! Wszystkie zadeklarowane zmienne będą znajdować się wewnątrz funkcji i nie będą zanieczyszczać globalnej przestrzeni nazw.Ten kod wykrywa każde zdarzenie kliknięcia na stronie, a następnie ukrywa
#CONTAINER
element wtedy i tylko wtedy, gdy kliknięty element nie był ani#CONTAINER
elementem, ani jednym z jego potomków.źródło
Możesz chcieć sprawdzić cel zdarzenia kliknięcia, które uruchamia się dla ciała, zamiast polegać na stopPropagation.
Coś jak:
Ponadto element body może nie obejmować całej przestrzeni wizualnej pokazanej w przeglądarce. Jeśli zauważysz, że Twoje kliknięcia się nie rejestrują, może być konieczne dodanie modułu obsługi kliknięć dla elementu HTML.
źródło
e.stopPropagation();
jeśli masz innego słuchacza kliknięćform_wrapper
kiedy klikniesz jedno z jego dzieci, co nie jest pożądanym zachowaniem. Zamiast tego użyj odpowiedzi prc322.DEMO na żywo
Sprawdź, czy obszar kliknięcia nie znajduje się w elemencie docelowym ani w jego elemencie potomnym
AKTUALIZACJA:
jQuery stop propagacja jest najlepszym rozwiązaniem
DEMO na żywo
źródło
clicked
jednego. W przeciwnym raziestopPropagation
możliwe byłoby otwarcie wielu list rozwijanych w tym samym czasie.źródło
Zaktualizowałem rozwiązanie do:
var mouseOverActiveElement = false;
źródło
.live
jest teraz przestarzałe ; użyj.on
zamiast tego.Rozwiązanie bez jQuery dla najpopularniejszej odpowiedzi :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
źródło
bind
tam nie działa. Czy możesz naprawić funkcję, aby działała?Demo na żywo z ESCfunkcjonalnością
Działa na komputerach i urządzeniach mobilnych
Jeśli w niektórych przypadkach musisz upewnić się, że element jest naprawdę widoczny po kliknięciu dokumentu:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
źródło
Czy coś takiego nie zadziałałoby?
lub
źródło
.form_wrapper
kiedy klikniesz jego dzieci (wśród innych problemów).Nawet lepsza:
źródło
.wrapper
bez względu na to, gdzie klikniesz na stronie, co nie jest wymagane.Zamiast słuchać każdego kliknięcia DOM, aby ukryć jeden konkretny element, możesz ustawić
tabindex
element nadrzędny<div>
i słuchaćfocusout
zdarzeń.Ustawienie
tabindex
upewni się, żeblur
zdarzenie zostanie uruchomione na<div>
(normalnie nie będzie).Twój HTML mógłby wyglądać następująco:
A twój JS:
źródło
W przypadku urządzeń dotykowych, takich jak IPAD i IPHONE, możemy użyć następującego kodu
źródło
Oto jsfiddle, który znalazłem w innym wątku, działa również z klawiszem esc: http://jsfiddle.net/S5ftb/404
źródło
Zbudowany z niesamowitej odpowiedzi prc322.
To dodaje kilka rzeczy ...
Mam nadzieję, że to komuś pomoże!
źródło
jeśli masz problemy z iOS, mouseup nie działa na urządzeniu Apple.
czy mousedown / mouseup w jquery działa na iPadzie?
używam tego:
źródło
(Tylko dodając do odpowiedzi prc322.)
W moim przypadku używam tego kodu, aby ukryć menu nawigacyjne, które pojawia się, gdy użytkownik kliknie odpowiednią kartę. Zauważyłem, że warto dodać dodatkowy warunek, że celem kliknięcia poza kontenerem nie jest link.
Wynika to z faktu, że niektóre linki w mojej witrynie dodają nową treść do strony. Jeśli ta nowa zawartość zostanie dodana w tym samym czasie, gdy zniknie menu nawigacji, może to być dezorientujące dla użytkownika.
źródło
Tak wiele odpowiedzi musi być prawem do przejścia, aby je dodać ... Nie widziałem aktualnych (jQuery 3.1.1) odpowiedzi - więc:
źródło
źródło
p
to nazwa elementu. Gdzie można przekazać także identyfikator, nazwę klasy lub elementu.źródło
Zwróć false, jeśli klikniesz .form_wrapper:
źródło
Dołącz zdarzenie click do elementów najwyższego poziomu poza opakowaniem formularza, na przykład:
Działa to również na urządzeniach dotykowych, upewnij się tylko, że na liście selektorów nie ma elementu nadrzędnego .form_wrapper.
źródło
SKRZYPCE
źródło
źródło
Skopiowano z https://sdtuts.com/click-on-not-specified-element/
Demo na żywo http://demos.sdtuts.com/click-on-specified-element
źródło
zrobiłem to tak:
źródło
źródło
Korzystając z tego kodu, możesz ukryć dowolną liczbę pozycji
źródło
Możesz powiązać zdarzenie kliknięcia z dokumentem, który ukryje menu rozwijane, jeśli klikniesz coś poza menu rozwijanym, ale nie ukryje go, jeśli klikniesz coś w menu rozwijanym, więc Twoje zdarzenie „pokaż” (lub pokaz slajdów lub cokolwiek innego pokazuje menu rozwijane)
Następnie, ukrywając to, odznacz zdarzenie kliknięcia
źródło
Zgodnie z docs ,
.blur()
działa dłużej niż<input>
tagu. Na przykład:źródło
div
nigdy nie rozmazują się - zdarzenia rozmycia nie mogą nawet wywoływać bańki wobec ich dzieci. Wreszcie, nawet jeśli powyższe nie byłyby prawdą, działałoby to tylko wtedy, gdy upewnisz się, że.form_wrapper
ostrość była ustawiona, zanim użytkownik ją kliknie.