Mens du opdaterer en webside eller hjemmesiden, er der situationer, hvor nogle inkluderede links ikke længere er nødvendige eller bliver irrelevante. Ud over det, effektiv styring af trafikken på et bestemt websted. I sådanne tilfælde gør annullering af begivenhederne i JavaScript underværker ved at deaktivere nogle funktioner og håndtere sådanne sagsscenarier.
Hvordan annullerer man begivenheder i JavaScript?
Følgende fremgangsmåder kan bruges til at annullere begivenheder i JavaScript:
-
- “ forhindreDefault() ” metode.
- “ Boolesk værdi ' nærme sig.
- “ stopPropagation() ” metode.
Fremgangsmåde 1: Annuller hændelser i JavaScript ved hjælp af preventDefault()-metoden
Det ' forhindreDefault() ”-metoden annullerer den vedhæftede begivenhed, hvis den kan annulleres. Denne metode kan bruges til at adskille den vedhæftede hændelse fra det tilgåede link og derved forhindre handlingen, der skal udføres.
Syntaks
event.preventDefault ( )
I den givne syntaks:
-
- “ begivenhed ” henviser til den begivenhed, der skal løsrives.
Eksempel
Gå gennem nedenstående kodestykke:
< h3 > Click-begivenheden vil blive aflyst ! h3 >
< -en id = 'websted' href = 'https://www.google.com/' > Besøg Googles websted -en >
document.getElementById ( 'websted' ) .addEventListener ( 'klik' , fungere ( afbestille ) {
cancel.preventDefault ( ) ;
} ) ;
Følg nedenstående trin:
-
- Inkluder først den angivne overskrift, der skal vises på Document Object Model (DOM).
- Derefter skal du angive ' URL ' bruger ' href ' attribut.
- Få nu adgang til den angivne URL i JavaScript-delen af koden.
- Vedhæft også en ' klik ' hændelse med URL'en ved hjælp af en funktion ved hjælp af ' addEventListener() ” metode.
- Endelig er ' forhindreDefault() ”-metoden vil blive anvendt ved hjælp af funktionens parameter for at frakoble den vedhæftede hændelse.
Produktion
Fremgangsmåde 2: Annuller hændelser i JavaScript ved at returnere en boolesk værdi
Denne tilgang kan implementeres ved at returnere ' falsk ” boolesk værdi ved den udløste hændelse.
Eksempel
Følgende kodelinjer demonstrerer det angivne koncept:
< centrum >< input type = 'tekst' pladsholder = 'Indtast tekst' oninput = 'cancelEvent()' > centrum >fungere annuller Begivenhed ( ) {
Vend tilbage falsk ;
alert ( 'Denne erklæring vil ikke blive vist' )
}
I ovenstående kodestykke:
-
- For det første inden for '
” tag, alloker et input tekstfelt. - Vedhæft også en ' oninput ' begivenhed med den angivne ' pladsholder 'værdi. Dette vil resultere i at den angivne funktion aktiveres ved indtastning af teksten.
- Nu, i JavaScript-delen af koden, erklærer du en funktion ved navn ' cancelEvent() ”. Returner i sin definition den boolske værdi ' falsk ' for at annullere den inkluderede ' begivenhed ”.
- Til sidst skal du angive den angivne besked i advarselsboksen. Den returnerede booleske værdi vil medføre, at dialogboksen ikke vises.
- For det første inden for '
Produktion
I ovenstående output kan det ses, at efter den tilgåede funktion, vises advarselsdialogboksen ikke, hvilket annullerer den vedhæftede begivenhed.
Fremgangsmåde 3: Annuller hændelser i JavaScript ved hjælp af stopPropagation()-metoden
Det ' stopPropagation() ”-metoden forhindrer den samme hændelse i at blive udbredt. Denne metode kan bruges til at stoppe udbredelsen mellem de to div'er, når du markerer afkrydsningsfeltet.
Syntaks
event.stopForplantning ( )
Eksempel
Overhold følgende kodelinjer:
< centrum >< h3 > Klik på hjemmesiden for at se ændringen: h3 >< div onclick = 'element2()' > Linux
< div onclick = 'element1(hændelse)' > Internet side div >
div >
< br >
Marker for at stoppe udbredelsen:
< input type = 'afkrydsningsfelt' id = 'kontrollere' >
centrum >
-
- I det første trin skal du på samme måde inkludere den angivne overskrift.
- Inkluder nu to ' div ' tags med vedhæftet ' onclick ” hændelser, hvor hver af dem påberåber sig to forskellige funktioner element2() og element1().
- Inkluder også et afkrydsningsfelt med det angivne id. Dette afkrydsningsfelt vil resultere i at stoppe udbredelsen mellem to divs.
Se nu på følgende JavaScript-kodelinjer:
fungere element 1 ( og ) {alert ( 'Du klikkede på webstedet' ) ;
hvis ( document.getElementById ( 'kontrollere' ) .kontrolleret ) {
e.stopForplantning ( ) ;
}
}
fungere element 2 ( ) {
alert ( 'Du klikkede på Linuxhint' ) ;
}
I ovenstående js-kode:
-
- Definer en funktion med navnet ' element1() ”. Her er parameteren ' og ' henviser til ' begivenhed ” bliver affyret angivet i HTML-delen af koden.
- Vis i sin definition advarselsdialogboksen med den angivne meddelelse.
- Derefter skal du få adgang til det oprettede afkrydsningsfelt ved dets id ved hjælp af ' getElementById() ” metode. Anvend også ' kontrolleret ” egenskab til det for at kontrollere tilstanden af det afkrydsede afkrydsningsfelt.
- Anvend derefter ' stopPropagation() ' metode, der henviser til parameteren ' og ”. Dette vil resultere i at stoppe udbredelsen fra den ene funktion til den anden funktion.
- På samme måde definerer du en anden funktion ' element2() ”, der skal udbredes på. Denne funktion vil kun være funktionel før udbredelse.
Produktion
Her observerer du adfærden ved at klikke på div'en, når du markerer afkrydsningsfeltet.
Vi har samlet metoderne til at aflyse begivenheder i JavaScript.
Konklusion
Det ' forhindreDefault() 'metoden, ' boolesk værdi ”-tilgangen eller ” stopPropagation() ”-metoden kan bruges til at annullere begivenheder i JavaScript. Den første metode kan implementeres til at frakoble den vedhæftede hændelse, hvilket resulterer i deaktivering af linket. Den boolske værditilgang returnerer ' falsk ” boolesk værdi ved den udløste hændelse. Metoden stopPropagation() kan anvendes til at stoppe udbredelsen mellem de to div'er ved hjælp af et inkluderet afkrydsningsfelt. Denne tutorial forklarede at annullere begivenheder i JavaScript.