Beim Aktualisieren einer Webseite oder der Website gibt es Situationen, in denen einige enthaltene Links nicht mehr benötigt werden oder irrelevant werden. Darüber hinaus können Sie den Datenverkehr einer bestimmten Website effektiv verwalten. In solchen Fällen bewirkt das Abbrechen der Ereignisse in JavaScript Wunder bei der Deaktivierung einiger Funktionen und der Behandlung solcher Fallszenarien.
Wie storniere ich Ereignisse in JavaScript?
Die folgenden Ansätze können verwendet werden, um Ereignisse in JavaScript abzubrechen:
-
- „ Standard verhindern() ' Methode.
- „ Boolescher Wert ' sich nähern.
- „ stopPropagation() ' Methode.
Ansatz 1: Ereignisse in JavaScript mit der Methode preventDefault() abbrechen
Das ' Standard verhindern() ”-Methode bricht das angehängte Ereignis ab, wenn es stornierbar ist. Dieses Verfahren kann verwendet werden, um das angehängte Ereignis von dem Link, auf den zugegriffen wird, zu trennen, wodurch verhindert wird, dass die Aktion ausgeführt wird.
Syntax
event.preventDefault ( )
In der angegebenen Syntax:
-
- „ Veranstaltung “ bezieht sich auf das abzutrennende Ereignis.
Beispiel
Gehen Sie das unten angegebene Code-Snippet durch:
< h3 > Das Click-Event wird abgesagt ! h3 >
< a Ich würde = 'Seite? ˅' href = 'https://www.google.com/' > Besuchen Sie die Google-Website a >
document.getElementById ( 'Seite? ˅' ) .addEventListener ( 'klicken' , Funktion ( Abbrechen ) {
cancel.preventDefault ( ) ;
} ) ;
Befolgen Sie die unten angegebenen Schritte:
-
- Fügen Sie zunächst die angegebene Überschrift hinzu, die im Document Object Model (DOM) angezeigt werden soll.
- Geben Sie danach das „ URL ' Verwendung der ' href ” Attribut.
- Greifen Sie nun im JavaScript-Teil des Codes auf die angegebene URL zu.
- Fügen Sie außerdem ein „ klicken ”-Ereignis mit der URL mit Hilfe einer Funktion, die das “ addEventListener() ' Methode.
- Endlich, das ' Standard verhindern() “-Methode wird mit Hilfe des Parameters der Funktion angewendet, um das angehängte Ereignis zu lösen.
Ausgabe
Ansatz 2: Ereignisse in JavaScript durch Rückgabe eines booleschen Werts abbrechen
Dieser Ansatz kann implementiert werden, indem die „ FALSCH ” boolescher Wert beim ausgelösten Ereignis.
Beispiel
Die folgenden Codezeilen demonstrieren das angegebene Konzept:
< Center >< Eingang Typ = 'Text' Platzhalter = 'Text eingeben' oninput = 'cancelEvent()' > Center >Funktion CancelEvent ( ) {
Rückkehr FALSCH ;
Alarm ( 'Diese Aussage wird nicht angezeigt' )
}
Im obigen Code-Snippet:
-
- Zunächst innerhalb der „
”-Tag ein Eingabetextfeld zuweisen. - Fügen Sie außerdem ein „ oninput ” Ereignis mit dem angegebenen “ Platzhalter ' Wert. Dies führt zum Aufrufen der angegebenen Funktion bei der Eingabe des Textes.
- Deklarieren Sie nun im JavaScript-Teil des Codes eine Funktion mit dem Namen „ CancelEvent() “. Geben Sie in seiner Definition den booleschen Wert „ FALSCH ” zum Abbrechen der enthaltenen “ Veranstaltung “.
- Geben Sie schließlich die angegebene Nachricht im Warnfeld an. Der zurückgegebene boolesche Wert führt dazu, dass das Dialogfeld nicht angezeigt wird.
- Zunächst innerhalb der „
Ausgabe
In der obigen Ausgabe kann beobachtet werden, dass bei der aufgerufenen Funktion das Warndialogfeld nicht angezeigt wird, wodurch das angehängte Ereignis abgebrochen wird.
Ansatz 3: Ereignisse in JavaScript mit der Methode stopPropagation() abbrechen
Das ' stopPropagation() ”-Methode verhindert, dass dasselbe Ereignis weitergegeben wird. Diese Methode kann verwendet werden, um die Weitergabe zwischen den beiden Divs beim Aktivieren des Kontrollkästchens zu stoppen.
Syntax
event.stopPropagation ( )
Beispiel
Beachten Sie die folgenden Codezeilen:
< Center >< h3 > Klicken Sie auf die Website, um die Änderung zu beobachten: h3 >< div anklicken = 'element2()' > Linux
< div anklicken = 'Element1 (Ereignis)' > Webseite div >
div >
< Br >
Aktivieren Sie diese Option, um die Ausbreitung zu stoppen:
< Eingang Typ = 'Kontrollkästchen' Ich würde = 'überprüfen' >
Center >
-
- Fügen Sie im ersten Schritt ebenfalls die angegebene Überschrift hinzu.
- Fügen Sie nun zwei „ div „Tags mit angehängtem“ anklicken ”-Ereignisse, wobei jedes von ihnen zwei verschiedene Funktionen element2() und element1() aufruft.
- Fügen Sie außerdem ein Kontrollkästchen mit der angegebenen ID ein. Dieses Kontrollkästchen führt dazu, dass die Weitergabe zwischen zwei Divs gestoppt wird.
Sehen Sie sich nun die folgenden JavaScript-Codezeilen an:
Funktion element1 ( und ) {Alarm ( „Sie haben auf die Website geklickt“ ) ;
wenn ( document.getElementById ( 'überprüfen' ) .geprüft ) {
e.stopPropagation ( ) ;
}
}
Funktion element2 ( ) {
Alarm ( 'Sie haben auf Linuxhint geklickt' ) ;
}
Im obigen js-Code:
-
- Definieren Sie eine Funktion mit dem Namen „ element1() “. Hier ist der Parameter „ und ' bezieht sich auf ' Veranstaltung “ im HTML-Teil des Codes angegeben ausgelöst wird.
- Zeigen Sie in seiner Definition das Warndialogfeld mit der angegebenen Nachricht an.
- Greifen Sie danach über die ID auf das erstellte Kontrollkästchen zu, indem Sie das „ getElementById() ' Methode. Wenden Sie auch das „ geprüft ”-Eigenschaft hinzufügen, um den Zustand des aktivierten Kontrollkästchens zu überprüfen.
- Wenden Sie dann das „ stopPropagation() ” Methode, die sich auf den Parameter bezieht “ und “. Dies führt dazu, dass die Ausbreitung von einer Funktion zur anderen Funktion gestoppt wird.
- Definieren Sie auf ähnliche Weise eine andere Funktion ' element2() “ zu verbreiten. Diese Funktion ist nur vor der Weitergabe funktionsfähig.
Ausgabe
Hier beobachtet das Verhalten beim Klicken auf das div beim Aktivieren des Kontrollkästchens.
Wir haben die Ansätze zum Abbrechen von Ereignissen in JavaScript zusammengestellt.
Fazit
Das ' Standard verhindern() “-Methode, die „ boolescher Wert “ Ansatz oder der „ stopPropagation() ”-Methode kann verwendet werden, um Ereignisse in JavaScript abzubrechen. Die erste Methode kann implementiert werden, um das angehängte Ereignis abzutrennen, was zu einer Deaktivierung des Links führt. Der boolesche Wertansatz gibt den „ FALSCH ” boolescher Wert beim ausgelösten Ereignis. Die Methode stopPropagation() kann angewendet werden, um die Weitergabe zwischen den beiden Divs mit Hilfe eines enthaltenen Kontrollkästchens zu stoppen. In diesem Tutorial wurde erklärt, wie Sie Ereignisse in JavaScript abbrechen.