Tijdens het bijwerken van een webpagina of de website zijn er situaties waarin sommige opgenomen links niet langer nodig zijn of irrelevant worden. Daarnaast is het effectief beheren van het verkeer van een bepaalde website. In dergelijke gevallen doet het annuleren van de gebeurtenissen in JavaScript wonderen bij het uitschakelen van bepaalde functionaliteit en het afhandelen van dergelijke scenario's.
Hoe evenementen in JavaScript te annuleren?
De volgende benaderingen kunnen worden gebruikt om gebeurtenissen in JavaScript te annuleren:
-
- “ voorkom standaard() ” methode.
- “ Booleaanse waarde ' nadering.
- “ stoppropagatie() ” methode.
Benadering 1: Annuleer gebeurtenissen in JavaScript met behulp van de methode preventDefault()
De ' voorkom standaard() ” annuleert de bijgevoegde gebeurtenis als deze kan worden geannuleerd. Deze methode kan worden gebruikt om de bijgevoegde gebeurtenis los te koppelen van de geopende link, waardoor wordt voorkomen dat de actie wordt uitgevoerd.
Syntaxis
event.preventStandaard ( )
In de gegeven syntaxis:
-
- “ evenement ” verwijst naar de gebeurtenis die moet worden losgemaakt.
Voorbeeld
Doorloop het onderstaande codefragment:
< h3 > Het Click-evenement wordt geannuleerd ! h3 >
< a ID kaart = 'site' href = 'https://www.google.com/' > Bezoek de Google-website a >
document.getElementById ( 'site' ) .addEventListener ( 'Klik' , functie ( annuleren ) {
annuleren.voorkomenStandaard ( ) ;
} ) ;
Volg de onderstaande stappen:
-
- Neem eerst de aangegeven kop op die moet worden weergegeven op het Document Object Model (DOM).
- Geef daarna de ' URL ' de ... gebruiken ' href ” attribuut.
- Ga nu in het JavaScript-gedeelte van de code naar de opgegeven URL.
- Voeg ook een ' Klik ” gebeurtenis met de URL met behulp van een functie met behulp van de “ addEventListener() ” methode.
- Eindelijk, de ' voorkom standaard() ” zal worden toegepast met behulp van de parameter van de functie om de bijgevoegde gebeurtenis los te koppelen.
Uitgang:
Benadering 2: annuleer gebeurtenissen in JavaScript door een booleaanse waarde te retourneren
Deze aanpak kan worden geïmplementeerd door de ' vals ” booleaanse waarde bij de geactiveerde gebeurtenis.
Voorbeeld
De volgende regels code demonstreren het genoemde concept:
< centrum >< invoer type = 'tekst' tijdelijke aanduiding = 'Tekst invoeren' oninput = 'cancelEvent()' > centrum >functie annuleerEvenement ( ) {
opbrengst vals ;
alarmeren ( 'Deze verklaring wordt niet weergegeven' )
}
In het bovenstaande codefragment:
-
- Eerst binnen de “
”-tag, wijs een invoertekstveld toe. - Voeg ook een ' oninput ” gebeurtenis met de opgegeven “ tijdelijke aanduiding ' waarde. Dit zal resulteren in het aanroepen van de gespecificeerde functie bij het invoeren van de tekst.
- Verklaar nu in het JavaScript-gedeelte van de code een functie met de naam ' annuleerEvent() ”. Retourneer in zijn definitie de booleaanse waarde ' vals ” om de meegeleverde “ evenement ”.
- Geef ten slotte het vermelde bericht op in het waarschuwingsvak. De geretourneerde booleaanse waarde zal ertoe leiden dat het dialoogvenster dat wordt weergegeven, wordt vermeden.
- Eerst binnen de “
Uitgang:
In de bovenstaande uitvoer kan worden opgemerkt dat bij de geopende functie het waarschuwingsdialoogvenster niet wordt weergegeven, waardoor de bijgevoegde gebeurtenis wordt geannuleerd.
Benadering 3: gebeurtenissen annuleren in JavaScript met behulp van stopPropagation()-methode
De ' stoppropagatie() ”-methode voorkomt dat dezelfde gebeurtenis wordt gepropageerd. Deze methode kan worden gebruikt om de verspreiding tussen de twee div's te stoppen door het selectievakje aan te vinken.
Syntaxis
event.stopPropagation ( )
Voorbeeld
Let op de volgende regels code:
< centrum >< h3 > Klik op de website om de wijziging te zien: h3 >< div bij klikken = 'element2()' > Linux
< div bij klikken = 'element1(gebeurtenis)' > Website div >
div >
< br >
Vink aan om propagatie te stoppen:
< invoer type = 'selectievakje' ID kaart = 'controleren' >
centrum >
-
- Neem in de eerste stap op dezelfde manier de genoemde kop op.
- Voeg nu twee ' div 'tags met aangehecht' bij klikken ” gebeurtenissen waarbij elk van hen twee verschillende functies element2() en element1() aanroept.
- Voeg ook een selectievakje toe met de opgegeven id. Deze checkbox zal resulteren in het stoppen van de propagatie tussen twee divs.
Kijk nu naar de volgende JavaScript-coderegels:
functie element1 ( en ) {alarmeren ( 'Je hebt op de website geklikt' ) ;
als ( document.getElementById ( 'controleren' ) .gecontroleerd ) {
e.stoppropagatie ( ) ;
}
}
functie element2 ( ) {
alarmeren ( 'Je klikte op Linuxhint' ) ;
}
In de bovenstaande js-code:
-
- Definieer een functie met de naam ' element1() ”. Hier is de parameter “ en ' verwijst naar de ' evenement ” wordt afgevuurd gespecificeerd in het HTML-gedeelte van de code.
- Geef in zijn definitie het waarschuwingsdialoogvenster weer met het vermelde bericht.
- Ga daarna naar het gemaakte selectievakje door zijn id met behulp van de ' getElementById() ” methode. Pas ook de ' gecontroleerd ” eigenschap toe om de staat van het aangevinkte selectievakje te controleren.
- Pas vervolgens de ' stoppropagatie() ” methode die verwijst naar de parameter “ en ”. Dit zal resulteren in het stoppen van de voortplanting van de ene functie naar de andere functie.
- Definieer op dezelfde manier een andere functie ' element2() ’ te verspreiden. Deze functie is alleen functioneel vóór verspreiding.
Uitgang:
Hier wordt het gedrag waargenomen bij het klikken op de div bij het aanvinken van het selectievakje.
We hebben de benaderingen samengesteld om gebeurtenissen in JavaScript te annuleren.
Conclusie
De ' voorkom standaard() ” methode, de “ booleaanse waarde ” benadering, of de “ stoppropagatie() ”-methode kan worden gebruikt om gebeurtenissen in JavaScript te annuleren. De eerste methode kan worden geïmplementeerd om de bijgevoegde gebeurtenis los te koppelen, wat resulteert in het uitschakelen van de link. De booleaanse waardebenadering retourneert de ' vals ” booleaanse waarde bij de geactiveerde gebeurtenis. De methode stopPropagation() kan worden toegepast om de verspreiding tussen de twee div's te stoppen met behulp van een bijgevoegd selectievakje. In deze zelfstudie wordt uitgelegd hoe u gebeurtenissen in JavaScript kunt annuleren.