jQuery na() i stopPropagation()

Question

Mam boczny panel, który ślizga się od lewej strony, dodając zawartość dynamicznie za pomocą get(). Chcę, aby wszystkie kliknięcia poza oknem powodowały jego zamknięcie poprzez uruchomienie funkcji. Na podstawie innych pytań, które przeczytałem, wymyśliłem następujący kod.

$('html').click(function() { 
    if (side_showing) { 
     close_side(); 
    } 
}); 

$(document).on("click", "#side", function(event) { 
    event.stopPropagation(); 
}); 

Nie mogę sprawić, żeby działało. Wiem, że wywoływana jest funkcja on(), ale wydaje się, że nie jest to event.stopPropagation. Jakieś wskazówki?

Answer 1

Nie można używać funkcji stopPropagation() z delegowaną obsługą zdarzeń (w której obsługa zdarzeń jest nadrzędna).

Dzieje się tak dlatego, że to propagacja zdarzeń sprawia, że ​​delegowana obsługa zdarzeń działa w pierwszej kolejności, a więc do czasu wywołania procedury obsługi zdarzenia, zdarzenie zostało już propagowane.

Kolejność czynności wykonywanych w kodzie to: propagacja zdarzenia do obiektu dokumentu, a następnie wywołanie procedury obsługi zdarzenia. Tak więc, gdy wywołujesz event.stopPropagation(), nic nie robi, ponieważ zdarzenie już się rozprzestrzeniło.

Jeśli zachodzi potrzeba, aby obiekty macierzyste nie otrzymywały propagacji zdarzeń, nie można używać delegowanej obsługi zdarzeń. Będziesz musiał przydzielić procedury obsługi zdarzeń bezpośrednio do samych obiektów, aby można było przechwycić zdarzenie PRZED jego propagacji. Jeśli są to obiekty tworzone dynamicznie, musisz przypisać je do obsługi zdarzeń zaraz po ich utworzeniu.

Jedyne inne znane mi rozwiązanie to umieszczanie programów obsługi zdarzeń na obiektach macierzystych, w których nie chcesz widzieć tych zdarzeń, i upewnij się, że te procedury obsługi zdarzeń ignorują zdarzenia, jeśli pochodzą one z obiektu #side.