Ocultar o elemento quando clicado do lado de fora usando JavaScript

Ao projetar uma página ou site da web, pode haver um requisito para tornar um elemento presente no DOM o tempo todo, mas de maneira não visível. Por exemplo, preenchendo alguns campos específicos, que ficam ativados quando clicados fora. Nesses casos, ocultar elementos quando clicados do lado de fora usando JavaScript é muito útil, especialmente para garantir um site.

Este artigo guiará sobre o esconderijo quando clicado de fora em JavaScript.

Como ocultar um elemento quando clicado de fora em JavaScript?

Para ocultar um elemento quando clicado de fora em JavaScript, as seguintes abordagens podem ser utilizadas:

• ““addEventListener ()”Método com“mostrar" propriedade.
• ““ONCLICKEvento e “mostrar" propriedade.
• ““addEventListener ()" e "adicionar()" métodos.
• ““jQuery ()" métodos.

Vejamos cada uma das abordagens mencionadas uma a uma!

Abordagem 1: Ocultar o elemento quando clicado de fora em JavaScript usando o método addEventListener () com a propriedade Display

O "addEventListener ()”O método anexa um evento ao elemento especificado, enquanto o“mostrar”Propriedade retorna o tipo de exibição de um elemento. Essas abordagens podem ser implementadas para associar um evento a um elemento de modo que o elemento correspondente se esconda no gatilho do evento.

Sintaxe

Na sintaxe dada:

• ““evento”Aponta para o evento especificado.
• ““ouvinte”É a função que será redirecionada para.
• ““usar”É o parâmetro opcional.

Exemplo

Vamos ver o exemplo a seguir para o conceito explicado:

Clique fora da imagem para escondê -la!

No trecho de código acima:

• Inclua um “imagem”Elemento com o especificado“eu ia”.
• No código JavaScript, anexe um evento à função chamada “clickoutside ()”Usando o“addEventListener ()”Método.
• Na próxima etapa, acesse o elemento incluído por seu “eu ia”Usando o“getElementById ()”Método.
• Finalmente, consulte o parâmetro da função “evento”E aplique a condição. A condição será tal que, se o clique for acionado fora do elemento, o “mostrar”Propriedade esconde o elemento.

Saída

Na saída acima, pode -se observar que a imagem incluída se esconde ao clicar fora dela.

Abordagem 2: Ocultar o elemento quando clicado de fora em JavaScript usando o OnClick Event e Exibe Property

Um "ONCLICK”O evento chama uma função com um clique e o“mostrar”Propriedade retorna da mesma forma o tipo de exibição de um elemento. Essas abordagens podem ser combinadas para esconder o parágrafo ao clicar fora dela com a ajuda de uma função.

Exemplo

Vamos passar pelo exemplo a seguir:

Clique fora do parágrafo para escondê -lo!

JavaScript é uma linguagem de programação muito eficaz. É muito útil para projetar uma página da web ou um site. Também pode ser integrado ao HTML para implementar algumas funcionalidades adicionais também.

Execute as etapas a seguir, conforme fornecido nas linhas acima do código:

• Inclua o cabeçalho declarado. Além disso, contém o elemento, eu.e., parágrafo com o especificado “eu ia”E dimensões ajustadas.
• No código JavaScript, aplique o “carregando”Evento de modo que a função definida seja invocada na janela carregada.
• Na definição da função, da mesma forma, acesse o parágrafo usando o “getElementById ()”Método.
• Em seguida, anexe um “ONCLICK”Evento de modo que a função associada é executada no clique.
• Na definição da função, da mesma forma, aplique a condição com a ajuda do elemento buscado “eu ia“De modo que se o clique for acionado fora do parágrafo, o elemento, também conhecido como“parágrafo”, Hides.

Saída

Da saída acima, é evidente que o parágrafo se esconde ao clicar fora dele.

Abordagem 3: Ocultar o elemento quando clicado fora do JavaScript usando o método addEventListener () e add ()

O "addEventListener ()”O método, como discutido, anexa um evento ao elemento especificado e ao“adicionar()”O método adiciona um ou mais de um token à lista. Esses métodos podem ser implementados para anexar de maneira semelhante a um evento à função e anexar o estilo CSS.

Sintaxe

Na sintaxe dada:

• ““evento”Corresponde ao evento especificado.
• ““ouvinte”É a função que será redirecionada para.
• ““usar”É o parâmetro opcional.

Exemplo

Vamos seguir o exemplo abaixo do momento:

Clique fora da imagem para escondê -la!

No trecho de código acima:

• Da mesma forma, inclua o cabeçalho declarado.
• Além disso, contém a imagem declarada no “div”Elemento com o especificado“aula”.
• No código JavaScript, acesse o “div”Elemento por seu“aula”Usando o“QuerySelector ()”Método.
• Na próxima etapa, da mesma forma, anexe um evento à função usando o “addEventListener ()”Método.
• Além disso, aplique a condição de modo que, se o evento anexado desencadear, o “Lista de classe”Propriedade junto com seu método“adicionar()”Invoca o estilo CSS, escondendo a imagem quando clicou fora dela.

No CSS, execute o estilo para ocultar o elemento no evento desencadeado:

Saída

A visibilidade da imagem pode ser observada quando clicada nela e quando clicada para fora.

Abordagem 4: Ocultar elemento quando clicado fora do JavaScript usando métodos jQuery ()

Os métodos jQuery podem ser utilizados para buscar diretamente um elemento e ocultá -lo ao clicar fora dele.

Exemplo

O exemplo a seguir explica o conceito declarado:

Este é o site Linuxhint

Execute as seguintes etapas:

• Em primeiro lugar, adicione o “jQueryBiblioteca para aplicar seus métodos.
• Além disso, inclua o cabeçalho declarado com o especificado “eu ia”.
• No código JavaScript, associe o “clique()”Método com a função. Dentro da função, acesse o cabeçalho incluído e aplique o “esconder()”Método para esconder.
• Lembre -se da mesma abordagem da etapa anterior para acessar o título.
• Aqui, aplique o “StopPropagation ()”Método, que resultará em alcançar a funcionalidade desejada no clique.

Saída

Isso se tratava de esconder elementos quando clicados de fora em JavaScript.

Conclusão

O "addEventListener ()”Método com“mostrar”Propriedade, uma“ONCLICKEvento e o “mostrar" propriedade, "addEventListener ()" e "adicionar()”Métodos ou os“jQuery ()”Os métodos podem ser usados ​​para ocultar um elemento quando clicados do lado de fora usando JavaScript. Este blog guiou o procedimento para ocultar elementos quando clicado de fora em JavaScript.