Element ausblenden, wenn Sie mit JavaScript nach draußen klicken

Während des Entwerfens einer Webseite oder einer Website kann ein Element ständig, jedoch nicht sichtbar sind. Zum Beispiel einige bestimmte Felder füllen, die beim Klicken nach draußen aktiviert werden. In solchen Fällen ist es sehr hilfreich, Elemente zu verbergen, wenn sie mit JavaScript draußen klicken, insbesondere bei der Sicherung einer Site.

In diesem Artikel wird das Verstecken von Elementen anleiten, wenn Sie draußen in JavaScript klicken.

So verbergen Sie ein Element, wenn Sie in JavaScript draußen klicken?

Um ein Element auszublenden, wenn Sie in JavaScript draußen klicken, können die folgenden Ansätze verwendet werden:

• “AddEventListener ()”Methode mit“Anzeige" Eigentum.
• “ONCLICKEreignis und “Anzeige" Eigentum.
• “AddEventListener ()" Und "hinzufügen()”Methoden.
• “jQuery ()”Methoden.

Schauen wir uns jede der genannten Ansätze nacheinander an!

Ansatz 1: Element ausblenden, wenn Sie im Außenbereich in JavaScript mit addEventListener () -Methode mit der Anzeigeeigenschaft klicken

Der "AddEventListener ()Die Methode erhält ein Ereignis an das angegebene Element, während das “AnzeigeDie Eigenschaft gibt den Anzeigeyp eines Elements zurück. Diese Ansätze können implementiert werden, um ein Ereignis mit einem Element zu verknüpfen, sodass sich das entsprechende Element nach dem Ereignisauslöser verbirgt.

Syntax

In der angegebenen Syntax:

• “Fall”Punkte auf das angegebene Ereignis.
• “HörerIst die Funktion, die umgeleitet wird.
• “verwendenIst der optionale Parameter.

Beispiel

Überlegen wir das folgende Beispiel für das erklärte Konzept:

Klicken Sie außerhalb des Bildes, um es zu verbergen!

Im obigen Code -Snippet:

• Einbeziehen "Bild"Element mit dem angegebenen"Ausweis”.
• Fügen Sie im JavaScript -Code ein Ereignis an die mit dem Namen namens Funktion anClickoutside ()" Verwendung der "AddEventListener ()" Methode.
• Greifen Sie im nächsten Schritt durch das angemessene Element zu “zu“Ausweis" Verwendung der "GetElementById ()" Methode.
• Beziehen Sie sich schließlich auf den Parameter der Funktion “Fall”Und wenden Sie den Zustand an. Die Bedingung ist so, dass das Klick, wenn der Klick außerhalb des Elements ausgelöst wird, das “Anzeige”Eigenschaft verbirgt das Element.

Ausgang

Aus der obigen Ausgabe kann beobachtet werden.

Ansatz 2: Element ausblenden, wenn Sie mit dem Onclick -Ereignis im Außenbereich in JavaScript klicken und Eigenschaften anzeigen

Ein "ONCLICKEreignis ruft eine Funktion auf ein Klick auf und die “AnzeigeDie Eigenschaft gibt in ähnlicher Weise den Anzeigeyp eines Elements zurück. Diese Ansätze können kombiniert werden, um den Absatz zu verbergen, wenn Sie mit Hilfe einer Funktion draußen draußen klicken.

Beispiel

Lassen Sie uns das folgende Beispiel durchlaufen:

Klicken Sie außerhalb des Absatzes, um es zu verbergen!

JavaScript ist eine sehr effektive Programmiersprache. Es ist sehr hilfreich bei der Gestaltung einer Webseite oder einer Website. Es kann auch in HTML integriert werden, um einige zusätzliche Funktionen zu implementieren.

Führen Sie die folgenden Schritte aus, die in den oben genannten Codezeilen angegeben sind:

• Fügen Sie die angegebene Überschrift ein. Enthalten auch das Element, ich.e., Absatz mit dem angegebenen “AusweisUnd angepasste Abmessungen.
• Wenden Sie im JavaScript -Code das anOnloadEreignis, so dass die definierte Funktion auf das geladene Fenster aufgerufen wird.
• In der Funktionsdefinition zugreifen ebenfalls auf den Absatz mit der “zu"GetElementById ()" Methode.
• Als nächstes eine “anbringen“ONCLICKEreignis, so dass die zugehörige Funktion auf dem Klick ausgeführt wird.
• In der Funktionsdefinition in ähnlicher Weise die Bedingung mit Hilfe des abgerufenen Elements anwenden “Ausweis"So wenn der Klick außerhalb des Absatzes ausgelöst wird, ist das Element, auch bekannt als"Absatz”, Versteckt sich.

Ausgang

Aus der obigen Ausgabe ist es offensichtlich, dass sich der Absatz beim Klicken nach draußen verbirgt.

Ansatz 3: Element ausblenden, wenn Sie mit addEventListener () und add () im Außenbereich in JavaScript klicken und add ()

Der "AddEventListener ()Die Methode, wie er erläutert ist, fügt ein Ereignis an das angegebene Element und die “beihinzufügen()Die Methode fügt der Liste einen oder mehr als ein Token hinzu. Diese Methoden können implementiert werden, um ein Ereignis in ähnlicher Weise an die Funktion anzuhängen und das CSS -Styling anzufangen.

Syntax

In der angegebenen Syntax:

• “Fall”Entspricht dem angegebenen Ereignis.
• “HörerIst die Funktion, die umgeleitet wird.
• “verwendenIst der optionale Parameter.

Beispiel

Folgen wir dem folgenden Beispiel:

Klicken Sie außerhalb des Bildes, um es zu verbergen!

Im obigen Code -Snippet:

• Ebenso die angegebene Überschrift einschließen.
• Enthalten auch das angegebene Bild innerhalb der “div"Element mit dem angegebenen"Klasse”.
• Greifen Sie im JavaScript -Code auf die “zu“div”Element durch seine“Klasse" Verwendung der "QuerySelector ()" Methode.
• Binden Sie im nächsten Schritt ebenfalls ein Ereignis an der Funktion mit der “anAddEventListener ()" Methode.
• Wenden Sie auch die Bedingung so an, dass das beigefügte Ereignis die “die“Klasse"Eigenschaft zusammen mit seiner Methode"hinzufügen()”Ruft das CSS -Styling auf und versteckt damit das Bild, wenn Sie draußen klicken.

Führen Sie in CSS das Styling durch, um das Element auf dem ausgelösten Ereignis zu verbergen:

Ausgang

Die Sichtbarkeit des Bildes kann beobachtet werden, wenn Sie darauf klicken und nach draußen geklickt werden.

Ansatz 4: Element ausblenden, wenn Sie mit Jquery () -Methoden nach draußen in JavaScript klicken

Die JQuery -Methoden können verwendet werden, um ein Element direkt abzurufen und es beim Klicken von draußen zu verbergen.

Beispiel

Das folgende Beispiel erklärt das angegebene Konzept:

Dies ist LinuxHint -Website

Führen Sie die folgenden Schritte aus:

• Zunächst fügen Sie die "hinzu"JQueryBibliothek, um ihre Methoden anzuwenden.
• Geben Sie auch die angegebene Überschrift mit dem angegebenen “an“Ausweis”.
• Assoziieren Sie im JavaScript -Code die “assoziieren Sie“klicken()Methode mit der Funktion. Greifen Sie innerhalb der Funktion auf die mitgelieferte Überschrift zu und wenden Sie die “an“verstecken()Methode, um es zu verbergen.
• Erinnern Sie sich an den gleichen Ansatz wie der vorherige Schritt für den Zugriff auf die Überschrift.
• Hier wenden Sie die “an“StopPropagation ()Methode, die dazu führt, dass die gewünschte Funktionalität beim Klick erreicht wird.

Ausgang

Es ging darum, Elemente zu verbergen, wenn sie nach draußen in JavaScript geklickt haben.

Abschluss

Der "AddEventListener ()”Methode mit“Anzeige”Eigentum, eine“ONCLICK”Ereignis und die“Anzeige" Eigentum, "AddEventListener ()" Und "hinzufügen()"Methoden oder die"jQuery ()Methoden können verwendet werden, um ein Element auszublenden, wenn Sie mit JavaScript draußen klicken. Dieser Blog leitete sich über das Verfahren zum Ausblenden von Elementen, wenn Sie draußen in JavaScript klicken.