Ukryj element po kliknięciu na zewnątrz za pomocą JavaScript

Podczas projektowania strony internetowej lub strony internetowej może istnieć wymóg, aby cały czas występować w DOM, ale w sposób niewiarygodny. Na przykład wypełnienie niektórych konkretnych pól, które zostaną włączone po kliknięciu na zewnątrz. W takich przypadkach ukrywanie elementów po kliknięciu na zewnątrz za pomocą JavaScript jest bardzo pomocne, szczególnie w zabezpieczeniu witryny.

Ten zapis będzie prowadzony o ukryciu elementów po kliknięciu na zewnątrz w JavaScript.

Jak ukryć element po kliknięciu na zewnątrz w JavaScript?

Aby ukryć element po kliknięciu na zewnątrz w JavaScript, można zastosować następujące podejścia:

• "addEventListener ()„Metoda z„wyświetlacz" nieruchomość.
• "na kliknięcie”Wydarzenie i„wyświetlacz" nieruchomość.
• "addEventListener ()" I "dodać()”Metody.
• "jQuery ()”Metody.

Spójrzmy na każde z wymienionych podejść jeden po drugim!

Podejście 1: Ukryj element po kliknięciu na zewnątrz w JavaScript za pomocą metody addEventListener () z właściwością wyświetlania

„„addEventListener ()„Metoda dołącza zdarzenie do określonego elementu, podczas gdy„wyświetlacz”Właściwość zwraca typ wyświetlania elementu. Podejścia te można wdrożyć w celu powiązania zdarzenia z elementem takim, że odpowiedni element ukrywa się na spustu zdarzenia.

Składnia

W podanej składni:

• "wydarzenie”Wskazuje na określone zdarzenie.
• "słuchacz”To funkcja, do której zostanie przekierowana.
• "używać”To opcjonalny parametr.

Przykład

Przeglądmy następujący przykład wyjaśnionej koncepcji:

Kliknij na zewnątrz obraz, aby go ukryć!

W powyższym fragmencie kodu:

• Obejmują „obraz”Element z określonym„ID".
• W kodzie JavaScript załącz zdarzenie do funkcji o nazwie „Clickoutside ()" używając "addEventListener ()" metoda.
• W następnym etapie dostęp do zawartego elementu przez „ID" używając "getElementById ()" metoda.
• Wreszcie, odnoszą się do parametru funkcji „wydarzenie”I zastosuj warunek. Warunek będzie taki, że jeśli kliknięcie zostanie uruchomione poza elementem, „wyświetlacz„Właściwość ukrywa element.

Wyjście

Z powyższego wyjścia można zauważyć, że dołączony obraz ukrywa się po kliknięciu na zewnątrz.

Podejście 2: Ukryj element po kliknięciu na zewnątrz w JavaScript za pomocą zdarzenia OnClick i właściwości wyświetlania

Jakiś "na kliknięcie„Wydarzenie wywołuje funkcję po kliknięciu i„wyświetlacz”Właściwość podobnie zwraca typ wyświetlania elementu. Te podejścia można połączyć, aby ukryć akapit po kliknięciu na zewnątrz za pomocą funkcji.

Przykład

Przejdźmy do następującego przykładu:

Kliknij poza akapit, aby go ukryć!

JavaScript to bardzo skuteczny język programowania. Jest to bardzo pomocne w projektowaniu strony internetowej lub witryny. Można go również zintegrować z HTML w celu wdrożenia niektórych dodatkowych funkcji.

Wykonaj następujące kroki podane w powyższych wierszach kodu:

• Obejmują podany nagłówek. Zawieraj także element, i.mi., akapit z określonym „ID”I dostosowane wymiary.
• W kodzie JavaScript zastosuj „Onload”Zdarzenie w taki sposób, że zdefiniowana funkcja jest wywoływana na załadowanym oknie.
• Podobnie w definicji funkcji uzyskaj dostęp do akapitu za pomocą „getElementById ()" metoda.
• Następnie dołącz „na kliknięcie„Wydarzenie, takie, że powiązana funkcja wykonuje się po kliknięciu.
• Podobnie w definicji funkcji zastosuj warunek za pomocą pobieranego elementu „ID”Tak, że jeśli kliknięcie jest wyzwalane poza akapit, element, czyli„ustęp”, Ukrywa się.

Wyjście

Z powyższego wyjścia widać, że akapit ukrywa się po kliknięciu na zewnątrz.

Podejście 3: Ukryj element po kliknięciu na zewnątrz w JavaScript za pomocą metody addEventListener () i add ()

„„addEventListener ()”Metoda, jak omówiono, dołącza zdarzenie do określonego elementu i„dodać()”Metoda dodaje do listy jeden lub więcej niż jeden token. Metody te można wdrożyć, aby podobnie dołączyć zdarzenie do funkcji i dołączyć do niej styl CSS.

Składnia

W podanej składni:

• "wydarzenie”Odpowiada określonym zdarzeniu.
• "słuchacz”To funkcja, do której zostanie przekierowana.
• "używać”To opcjonalny parametr.

Przykład

Śledźmy poniżej podanego przykładu:

Kliknij na zewnątrz obraz, aby go ukryć!

W powyższym fragmencie kodu:

• Podobnie, obejmują podane nagłówek.
• Zawierają również podany obraz w „div„Element o określonym„klasa".
• W kodzie JavaScript uzyskaj dostęp do „div”Element po„klasa" używając "QuerySelelect ()" metoda.
• Podobnie w następnym kroku dołącz zdarzenie do funkcji za pomocą „addEventListener ()" metoda.
• Zastosuj także warunek, że jeśli załączone zdarzenie uruchamia się, „„Lista klas„Własność wraz z jej metodą”dodać()„Wywołuje styl CSS, tym samym ukrywając obraz po kliknięciu na zewnątrz.

W CSS wykonaj stylistykę do ukrywania elementu na wyzwalonym wydarzeniu:

Wyjście

Widoczność obrazu można zaobserwować po kliknięciu i po kliknięciu na zewnątrz.

Podejście 4: Ukryj element po kliknięciu na zewnątrz w JavaScript za pomocą metod jQuery ()

Metody jQuery można wykorzystać do bezpośredniego pobierania elementu i ukrycia go po kliknięciu na zewnątrz.

Przykład

Poniższy przykład wyjaśnia podaną koncepcję:

To jest strona internetowa Linuxhint

Wykonaj następujące kroki:

• Po pierwsze, dodaj „JQuery„Biblioteka do zastosowania swoich metod.
• Uwzględnij również podane nagłówek z określonym „ID".
• W kodzie JavaScript skojarz „Kliknij()”Metoda z funkcją. W ramach funkcji uzyskaj dostęp do dołączonego nagłówka i zastosuj „ukrywać()„Metoda go ukryć.
• Przypomnij sobie to samo podejście, co poprzedni krok w celu uzyskania dostępu do nagłówka.
• Tutaj zastosuj „stoppropagation ()„Metoda, która spowoduje osiągnięcie pożądanej funkcjonalności po kliknięciu.

Wyjście

Chodziło o ukrywanie elementów po kliknięciu na zewnątrz w JavaScript.

Wniosek

„„addEventListener ()„Metoda z„wyświetlacz„Nieruchomość,„na kliknięcie”Wydarzenie i„ „wyświetlacz" nieruchomość, "addEventListener ()" I "dodać()”Metody lub„jQuery ()„Metody można wykorzystać do ukrycia elementu po kliknięciu na zewnątrz za pomocą JavaScript. Ten blog kierował procedurą ukrycia elementów po kliknięciu na zewnątrz w JavaScript.