Masquer l'élément lorsque vous cliquez à l'extérieur en utilisant JavaScript

Lors de la conception d'une page Web ou d'un site Web, il peut y avoir une exigence pour rendre un élément présent dans le DOM tout le temps mais de manière non visible. Par exemple, remplir certains champs particuliers, qui deviennent activés lorsqu'ils sont cliqués à l'extérieur. Dans de tels cas, cacher des éléments lorsqu'il est cliqué à l'extérieur en utilisant JavaScript est très utile, en particulier pour sécuriser un site.

Cet article guidera sur la cachette des éléments lorsqu'il est cliqué à l'extérieur en JavaScript.

Comment masquer un élément lorsqu'il est cliqué à l'extérieur en javascript?

Pour masquer un élément lorsqu'il est cliqué à l'extérieur en JavaScript, les approches suivantes peuvent être utilisées:

• "addEventListener ()"Méthode avec"afficher" propriété.
• "sur clic«Événement et«afficher" propriété.
• "addEventListener ()" et "ajouter()«Méthodes.
• "jQuery ()«Méthodes.

Regardons chacune des approches mentionnées une par une!

Approche 1: Masquez l'élément lorsque vous cliquez à l'extérieur en javascrip

Le "addEventListener ()»La méthode attache un événement à l'élément spécifié, tandis que le«afficher»La propriété renvoie le type d'affichage d'un élément. Ces approches peuvent être mises en œuvre pour associer un événement à un élément tel que l'élément correspondant se cache sur le déclencheur de l'événement.

Syntaxe

Dans la syntaxe donnée:

• "événement»Porte l'événement spécifié.
• "auditeur«Est la fonction qui sera redirigea vers.
• "utiliser"Est le paramètre facultatif.

Exemple

Présentation de l'exemple suivant pour le concept expliqué:

Cliquez en dehors de l'image pour le masquer!

Dans l'extrait de code ci-dessus:

• Inclure un «image"Elément avec le spécifié"identifiant".
• Dans le code JavaScript, joignez un événement à la fonction nommée «ClickOutside ()" en utilisant le "addEventListener ()" méthode.
• Dans l'étape suivante, accédez à l'élément inclus par son «identifiant" en utilisant le "getElementByid ()" méthode.
• Enfin, reportez-vous au paramètre de la fonction "événement»Et appliquez la condition. La condition sera telle que si le clic est déclenché à l'extérieur de l'élément, le «afficher»La propriété cache l'élément.

Sortir

À partir de la sortie ci-dessus, on peut observer que l'image incluse se cache en cliquant à l'extérieur.

Approche 2: Masquer l'élément lorsque vous cliquez à l'extérieur en JavaScript à l'aide de l'événement OnClick et de la propriété Afficher

Un "sur clic»L'événement invoque une fonction sur un clic, et le« «afficher»La propriété renvoie également le type d'affichage d'un élément. Ces approches peuvent être combinées pour masquer le paragraphe en cliquant à l'extérieur à l'aide d'une fonction.

Exemple

Passons par l'exemple suivant:

Cliquez sur le paragraphe pour le masquer!

JavaScript est un langage de programmation très efficace. Il est très utile pour concevoir une page Web ou un site. Il peut également être intégré à HTML pour implémenter également certaines fonctionnalités supplémentaires.

Effectuez les étapes suivantes comme indiqué dans les lignes de code ci-dessus:

• Inclure le cap indiqué. Contient également l'élément, je.e., paragraphe avec le spécifié "identifiant»Et dimensions ajustées.
• Dans le code JavaScript, appliquez le «en charge»Événement tel que la fonction définie est invoquée sur la fenêtre chargée.
• Dans la définition de la fonction, également, accédez au paragraphe en utilisant le «getElementByid ()" méthode.
• Ensuite, joignez un "sur clic»Événement tel que la fonction associée s'exécute sur le clic.
• Dans la définition de la fonction, de même, appliquez la condition à l'aide de l'élément récupéré "identifiant"De telle sorte que si le clic est déclenché à l'extérieur du paragraphe, l'élément, aka"paragraphe», Cache.

Sortir

D'après la sortie ci-dessus, il est évident que le paragraphe se cache en cliquant à l'extérieur.

Approche 3: Masquez l'élément lorsqu'il est cliqué à l'extérieur en javascrip

Le "addEventListener ()»La méthode, comme discuté, attache un événement à l'élément spécifié et à« le «ajouter()»La méthode ajoute un ou plusieurs jeton à la liste. Ces méthodes peuvent être implémentées pour attacher de la même manière un événement à la fonction et ajouter le style CSS.

Syntaxe

Dans la syntaxe donnée:

• "événement»Correspond à l'événement spécifié.
• "auditeur«Est la fonction qui sera redirigea vers.
• "utiliser"Est le paramètre facultatif.

Exemple

Suivons l'exemple indiqué ci-dessous:

Cliquez en dehors de l'image pour le masquer!

Dans l'extrait de code ci-dessus:

• De même, incluez le cap indiqué.
• Contiennent également l'image indiquée dans le «div"Élément ayant le spécifié"classe".
• Dans le code JavaScript, accédez au «div«Élément par son«classe" en utilisant le "QuerySelector ()" méthode.
• À l'étape suivante, également joindre un événement à la fonction à l'aide de la «addEventListener ()" méthode.
• Appliquez également la condition de telle sorte que si l'événement ci-joint se déclenche, le «liste de classe"Propriété ainsi que sa méthode"ajouter()»Invoque le style CSS, cachant ainsi l'image lorsqu'il est cliqué à l'extérieur.

Dans CSS, effectuez le style pour cacher l'élément sur l'événement déclenché:

Sortir

La visibilité de l'image peut être observée lorsque vous cliquez dessus et lorsqu'il est cliqué à l'extérieur.

Approche 4: Masquer l'élément lorsqu'il est cliqué à l'extérieur en javascript à l'aide de méthodes jQuery ()

Les méthodes jQuery peuvent être utilisées pour récupérer directement un élément et le masquer en cliquant à l'extérieur.

Exemple

L'exemple suivant explique le concept déclaré:

Ceci est le site Web de Linuxhint

Effectuez les étapes suivantes:

• Tout d'abord, ajoutez le «jquery»Bibliothèque pour appliquer ses méthodes.
• Incluez également la rubrique indiquée avec le spécifié "identifiant".
• Dans le code JavaScript, associez le «Cliquez sur()”Méthode avec la fonction. Dans la fonction, accédez à l'en-tête inclus et appliquez le «cacher()«Méthode pour le cacher.
• Rappelez-vous la même approche que l'étape précédente pour accéder à la rubrique.
• Ici, appliquez le «stopPropagation ()”Méthode, qui se traduira par la réalisation des fonctionnalités souhaitées sur le clic.

Sortir

Il s'agissait de cacher des éléments lorsqu'il a cliqué à l'extérieur en javascript.

Conclusion

Le "addEventListener ()"Méthode avec"afficher«Propriété, un«sur clic”Événement et le"afficher" propriété, "addEventListener ()" et "ajouter()"Méthodes ou"jQuery ()«Les méthodes peuvent être utilisées pour masquer un élément lorsqu'il est cliqué à l'extérieur en utilisant JavaScript. Ce blog a guidé sur la procédure pour masquer les éléments lorsqu'il est cliqué à l'extérieur en JavaScript.