jQuery kliknij gdziekolwiek na stronie z wyjątkiem 1 div


Odpowiedzi:


142

Możesz nałożyć clickna bodydokument i anulować clickprzetwarzanie jeśli clickzdarzenie jest generowane przez div z id menu_content, Spowoduje to powiązanie zdarzenia z pojedynczym elementem i zapisanie powiązania clickz każdym elementem opróczmenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});

3
a co z potomkami dzieci w DIV?
iKamy

2
Możemy użyć najbliższego do sprawdzenia źródła zdarzenia dowolnego przodka o id menu_content jak if ($ (evt.target) .closest ('# menu_content'). Length) retrun; sprawdź moją zaktualizowaną odpowiedź.
Adil

Ponieważ closestzaczyna się od aktualnego elementu, obsługuje klikanie menu_content, a także klikanie potomków. Myślę, że druga ifto wszystko, czego potrzebujesz.
goodeye

50

Zapoznaj się z dokumentacją obiektu docelowego zdarzenia jQuery . Korzystając z właściwości target obiektu zdarzenia, możesz wykryć, skąd pochodzi kliknięcie w #menu_contentelemencie, a jeśli tak, to wcześniej zakończyć procedurę obsługi kliknięcia. Będziesz musiał użyć .closest()do obsługi przypadków, w których kliknięcie pochodziło z elementu podrzędnego #menu_content.

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});

42

Spróbuj tego

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

możesz również skorzystać z wydarzeń zewnętrznych


5
Ta praca, ale użycie zdarzenia event.stopPropagation () może wywołać efekt domina w innych JS zawartych w rodzicu.
Edd Smith

9

Wiem, że odpowiedziano na to pytanie i wszystkie odpowiedzi są miłe. Ale chciałem dodać moje dwa centy do tego pytania dla osób, które mają podobny (ale nie dokładnie ten sam) problem.

W bardziej ogólny sposób możemy zrobić coś takiego:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

W ten sposób możemy obsłużyć nie tylko zdarzenia wywołane przez cokolwiek oprócz elementu o identyfikatorze, menu_contentale także zdarzenia, które zostały wywołane przez cokolwiek z wyjątkiem dowolnego elementu, który możemy wybrać za pomocą selektorów CSS.

Na przykład w poniższym fragmencie kodu otrzymuję zdarzenia uruchamiane przez dowolny element z wyjątkiem wszystkich <li>elementów, które są potomkami elementu div o identyfikatorze myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});

1
Chciałem tylko powiedzieć, że ta metoda zadziałała dla mnie dobrze, użyłem .is (), a także .closest () z selektorem css, który nie miał identyfikatora, ale tylko niektóre klasy dziękuję
powtórz

7

oto co zrobiłem. chciałem się upewnić, że mogę kliknąć którekolwiek z dzieci w moim datepicker bez zamykania go.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

mój rzeczywisty kod:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});

Ładna wersja z kliknięciami dzieci i klasy, powinna być wybraną odpowiedzią!
rAthus
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.