Ocultar elemento cuando se hace clic afuera usando JavaScript

Al diseñar una página web o sitio web, puede haber un requisito para hacer un elemento presente en el DOM todo el tiempo pero de manera no visible. Por ejemplo, llenar algunos campos en particular, que se habilitan cuando se hace clic afuera. En tales casos, ocultar elementos cuando se hace clic afuera usando JavaScript es muy útil, especialmente para asegurar un sitio.

Este artículo guiará sobre los elementos ocultados cuando se haga clic en JavaScript.

Cómo ocultar un elemento cuando se hace clic afuera en JavaScript?

Para ocultar un elemento cuando se hace clic afuera en JavaScript, se pueden utilizar los siguientes enfoques:

• "addEventListener ()"Método con"mostrar" propiedad.
• "al hacer clic"Evento y"mostrar" propiedad.
• "addEventListener ()" y "agregar()" métodos.
• "jQuery ()" métodos.

Veamos cada uno de los enfoques mencionados uno por uno!

Enfoque 1: ocultar el elemento cuando se hace clic afuera en JavaScript usando el método addEventListener () con la propiedad de visualización

El "addEventListener ()El método "adjunta un evento al elemento especificado, mientras que el"mostrarLa propiedad devuelve el tipo de visualización de un elemento. Estos enfoques se pueden implementar para asociar un evento con un elemento de tal manera que el elemento correspondiente se esconde en el activador del evento.

Sintaxis

En la sintaxis dada:

• "evento"Señala el evento especificado.
• "oyente"¿Es la función que se redirigirá a.
• "usar"Es el parámetro opcional.

Ejemplo

Vamos a ver el siguiente ejemplo del concepto explicado:

Haga clic fuera de la imagen para ocultarla!

En el fragmento de código anterior:

• Incluir un "imagen"Elemento con el especificado"identificación".
• En el código JavaScript, adjunte un evento a la función llamada "clickoutside ()" utilizando el "addEventListener ()" método.
• En el siguiente paso, acceda al elemento incluido por su "identificación" utilizando el "getElementById ()" método.
• Finalmente, consulte el parámetro de la función "evento"Y aplique la condición. La condición será tal que si el clic se activa fuera del elemento, el "mostrarLa propiedad oculta el elemento.

Producción

De la salida anterior, se puede observar que la imagen incluida se esconde al hacer clic fuera de ella.

Enfoque 2: ocultar el elemento cuando se hace clic afuera en JavaScript usando el evento OnClick y la propiedad de visualización

Un "al hacer clic"El evento invoca una función en un clic y el"mostrar"La propiedad devuelve de manera similar el tipo de visualización de un elemento. Estos enfoques se pueden combinar para ocultar el párrafo al hacer clic fuera con la ayuda de una función.

Ejemplo

Pasemos por el siguiente ejemplo:

Haga clic fuera del párrafo para ocultarlo!

JavaScript es un lenguaje de programación muy efectivo. Es muy útil para diseñar una página web o un sitio. También se puede integrar con HTML para implementar algunas funcionalidades adicionales también.

Realice los siguientes pasos como se dan en las líneas de código anteriores:

• Incluir el encabezado declarado. Además, contiene el elemento, yo.mi., párrafo con el especificado "identificación"Y dimensiones ajustadas.
• En el código JavaScript, aplique el "encendido"Evento de tal manera que la función definida se invoca en la ventana cargada.
• En la definición de funciones, del mismo modo, acceda al párrafo utilizando el "getElementById ()" método.
• A continuación, adjunte un "al hacer clic"Evento de tal manera que la función asociada se ejecute en el clic.
• En la definición de la función, de manera similar, aplique la condición con la ayuda de los elementos recuperados "identificación"De modo que si el clic se activa fuera del párrafo, el elemento, también conocido como"párrafo", se esconde.

Producción

De la salida anterior, es evidente que el párrafo se esconde al hacer clic fuera de él.

Enfoque 3: ocultar el elemento cuando se hace clic afuera en JavaScript usando el método addEventListener () y add ()

El "addEventListener ()El método ", como se discutió, adjunta un evento al elemento especificado y al"agregar()"El método agrega uno o más de un token a la lista. Estos métodos se pueden implementar para adjuntar de manera similar un evento a la función y agregar el estilo CSS a ella.

Sintaxis

En la sintaxis dada:

• "evento"Corresponde al evento especificado.
• "oyente"¿Es la función que se redirigirá a.
• "usar"Es el parámetro opcional.

Ejemplo

Sigamos el ejemplo declarado a continuación:

Haga clic fuera de la imagen para ocultarla!

En el fragmento de código anterior:

• Del mismo modo, incluya el encabezado declarado.
• Además, contiene la imagen establecida dentro del "div"Elemento tiene el especificado"clase".
• En el código de JavaScript, acceda al "div"Elemento por su"clase" utilizando el "QuerySelector ()" método.
• En el siguiente paso, del mismo modo, adjunte un evento a la función utilizando el "addEventListener ()" método.
• Además, aplique la condición de modo que si el evento adjunto se desencadena, el "Lista de clase"Propiedad junto con su método"agregar()"Invoca el estilo CSS, ocultando así la imagen cuando se hace clic fuera de él.

En CSS, realice el estilo para ocultar el elemento en el evento activado:

Producción

La visibilidad de la imagen se puede observar cuando se hace clic en ella y cuando se hace clic afuera.

Enfoque 4: Ocultar elemento cuando se hace clic afuera en JavaScript usando métodos jquery ()

Los métodos jQuery se pueden utilizar para obtener directamente un elemento y ocultarlo al hacer clic fuera de él.

Ejemplo

El siguiente ejemplo explica el concepto declarado:

Este es el sitio web de Linuxhint

Realice los siguientes pasos:

• En primer lugar, agregue el "jQueryBiblioteca para aplicar sus métodos.
• Además, incluya el encabezado establecido con el especificado "identificación".
• En el código JavaScript, asocie el "hacer clic()Método "con la función. Dentro de la función, acceda al encabezado incluido y aplique el "esconder()Método para ocultarlo.
• Recuerde el mismo enfoque que el paso anterior para acceder al encabezado.
• Aquí, aplique el "stopPropagation ()"Método, que dará como resultado lograr la funcionalidad deseada en el clic.

Producción

Eso se trataba de ocultar elementos cuando se hace clic afuera en JavaScript.

Conclusión

El "addEventListener ()"Método con"mostrar"Propiedad, una"al hacer clic"Evento y el"mostrar" propiedad, "addEventListener ()" y "agregar()"Métodos o el"jQuery ()Los métodos se pueden usar para ocultar un elemento cuando se hace clic afuera usando JavaScript. Este blog guió sobre el procedimiento para ocultar elementos cuando se hace clic afuera en JavaScript.