Nascondi l'elemento quando è cliccato all'esterno usando JavaScript

Durante la progettazione di una pagina Web o un sito Web, può esserci un requisito per rendere sempre presente un elemento nel DOM ma in modo non visibile. Ad esempio, riempire alcuni campi particolari, che diventano abilitati quando vengono cliccati all'esterno. In tali casi, nascondere elementi se cliccati all'esterno usando JavaScript è molto utile, soprattutto per proteggere un sito.

Questo articolo guiderà sugli elementi nascondigli quando viene cliccato all'esterno in JavaScript.

Come nascondere un elemento quando è cliccato fuori in JavaScript?

Per nascondere un elemento quando viene cliccato all'esterno in JavaScript, è possibile utilizzare i seguenti approcci:

• "addEventListener ()Metodo "con"Schermo" proprietà.
• "al clicEvento "e"Schermo" proprietà.
• "addEventListener ()" E "aggiungere()"Metodi.
• "jQuery ()"Metodi.

Diamo un'occhiata a ciascuno degli approcci menzionati uno per uno!

Approccio 1: Nascondi elemento quando viene cliccato all'esterno nel metodo JavaScript utilizzando il metodo addEventListener () con proprietà di visualizzazione

IL "addEventListener ()"Il metodo allega un evento all'elemento specificato, mentre il"Schermo"La proprietà restituisce il tipo di visualizzazione di un elemento. Questi approcci possono essere implementati per associare un evento a un elemento in modo tale che l'elemento corrispondente si nasconda al trigger dell'evento.

Sintassi

Nella sintassi data:

• "evento"Punta all'evento specificato.
• "ascoltatore"È la funzione che verrà reindirizzata a.
• "utilizzo"È il parametro opzionale.

Esempio

Panoramiamo il seguente esempio per il concetto spiegato:

Clicca fuori dall'immagine per nasconderla!

Nel frammento di codice sopra:

• Includere un "Immagine"Elemento con il specificato"id".
• Nel codice JavaScript, allega un evento alla funzione denominata "Clickoutside ()" usando il "addEventListener ()" metodo.
• Nel passaggio successivo, accedi all'elemento incluso dal suo "id" usando il "getElementById ()" metodo.
• Infine, fare riferimento al parametro della funzione "evento"E applica la condizione. La condizione sarà tale che se il clic viene attivato all'esterno dell'elemento, "Schermo"La proprietà nasconde l'elemento.

Produzione

Dall'output sopra, si può osservare che l'immagine inclusa si nasconde facendo clic fuori di essa.

Approccio 2: Nascondi elemento quando è cliccata fuori in JavaScript utilizzando l'evento OnClick e la proprietà Visualizza

UN "al clic"L'evento invoca una funzione su un clic e il"Schermo"La proprietà restituisce allo stesso modo il tipo di visualizzazione di un elemento. Questi approcci possono essere combinati per nascondere il paragrafo dopo aver fatto clic fuori con l'aiuto di una funzione.

Esempio

Passiamo attraverso il seguente esempio:

Clicca fuori dal paragrafo per nasconderlo!

JavaScript è un linguaggio di programmazione molto efficace. È molto utile nella progettazione di una pagina web o di un sito. Può anche essere integrato con HTML per implementare anche alcune funzionalità aggiunte.

Eseguire i seguenti passaggi come indicato nelle righe di codice sopra:

• Includere l'intestazione dichiarata. Inoltre, contengono l'elemento, i.e., paragrafo con il specificato "id"E le dimensioni regolate.
• Nel codice JavaScript, applica il "Onload"Evento in modo tale che la funzione definita sia invocata sulla finestra caricata.
• Nella definizione della funzione, allo stesso modo, accedi al paragrafo usando "getElementById ()" metodo.
• Successivamente, allegare un "al clic"Evento in modo tale che la funzione associata esegua il clic.
• Nella definizione della funzione, allo stesso modo, applicare la condizione con l'aiuto dell'elemento recuperato "id"In tale che se il clic viene attivato al di fuori del paragrafo, l'elemento, aka"paragrafo", nasconde.

Produzione

Dall'output di cui sopra, è evidente che il paragrafo si nasconde facendo clic fuori di esso.

Approccio 3: Nascondi elemento quando è cliccata all'esterno in JavaScript usando il metodo ADDEventListener () e ADD ()

IL "addEventListener ()"Metodo, come discusso, allega un evento all'elemento specificato e al"aggiungere()"Il metodo aggiunge uno o più di un token all'elenco. Questi metodi possono essere implementati per collegare allo stesso modo un evento alla funzione e aggiungere lo stile CSS.

Sintassi

Nella sintassi data:

• "evento"Corrisponde all'evento specificato.
• "ascoltatore"È la funzione che verrà reindirizzata a.
• "utilizzo"È il parametro opzionale.

Esempio

Seguiamo l'esempio di seguito:

Clicca fuori dall'immagine per nasconderla!

Nel frammento di codice sopra:

• Allo stesso modo, includi l'intestazione dichiarata.
• Inoltre, contenere l'immagine dichiarata all'interno del “div"Elemento con il specificato"classe".
• Nel codice JavaScript, accedi al "div"Elemento per il suo"classe" usando il "QuerySelector ()" metodo.
• Nel passaggio successivo, allo stesso modo, allegare un evento alla funzione usando "addEventListener ()" metodo.
• Inoltre, applica la condizione in modo tale che se l'evento allegato innesca, il "classlist"Proprietà insieme al suo metodo"aggiungere()"Invoca lo stile CSS, nascondendo così l'immagine quando viene cliccata fuori di essa.

In CSS, eseguire lo stile per nascondere l'elemento sull'evento attivato:

Produzione

La visibilità dell'immagine può essere osservata quando viene cliccata su di essa e quando è cliccata all'esterno.

Approccio 4: Nascondi elemento quando è cliccata all'esterno in JavaScript usando i metodi JQuery ()

I metodi jQuery possono essere utilizzati per recuperare direttamente un elemento e nasconderlo facendo clic fuori di esso.

Esempio

Il seguente esempio spiega il concetto dichiarato:

Questo è il sito web Linuxhint

Eseguire i seguenti passaggi:

• In primo luogo, aggiungi il “jQuery"Biblioteca per applicare i suoi metodi.
• Inoltre, includi l'intestazione dichiarata con la specifica "id".
• Nel codice JavaScript, associare il “clic()"Metodo con la funzione. All'interno della funzione, accedi all'intestazione inclusa e applica il "nascondere()"Metodo per nasconderlo.
• Ricorda lo stesso approccio del passaggio precedente per accedere all'intestazione.
• Qui, applica il "stoppropagation ()"Metodo, che comporterà il raggiungimento della funzionalità desiderata sul clic.

Produzione

Si trattava di nascondere elementi quando sono stati cliccati fuori in JavaScript.

Conclusione

IL "addEventListener ()Metodo "con"Schermo"Proprietà, un"al clicEvento "e il"Schermo" proprietà, "addEventListener ()" E "aggiungere()Metodi o il "jQuery ()"I metodi possono essere utilizzati per nascondere un elemento quando vengono cliccati all'esterno usando JavaScript. Questo blog ha guidato la procedura per nascondere gli elementi quando è stato cliccato all'esterno in JavaScript.