Veebilehte või veebisaiti värskendades tuleb ette olukordi, kus mõnda lisatud linki pole enam vaja või need muutuvad ebaoluliseks. Lisaks sellele konkreetse veebisaidi liikluse tõhus haldamine. Sellistel juhtudel teeb sündmuste tühistamine JavaScriptis imesid mõne funktsiooni keelamisel ja selliste juhtumite käsitlemisel.
Kuidas JavaScriptis sündmusi tühistada?
Sündmuste tühistamiseks JavaScriptis saab kasutada järgmisi meetodeid.
-
- “ preventDefault() ” meetod.
- “ Boole'i väärtus ” lähenemine.
- “ stopPropagation() ” meetod.
1. lähenemisviis: tühistage sündmused JavaScriptis, kasutades meetodit preventDefault().
' preventDefault() ” meetod tühistab lisatud sündmuse, kui see on tühistatav. Seda meetodit saab kasutada lisatud sündmuse eraldamiseks juurdepääsetavast lingist, takistades sellega toimingu sooritamist.
Süntaks
event.preventDefault ( )
Antud süntaksis:
-
- “ sündmus ” viitab eraldatavale sündmusele.
Näide
Vaadake läbi alltoodud koodilõik:
< h3 > Sündmus Click tühistatakse ! h3 >
< a id = 'sait' href = 'https://www.google.com/' > Külastage Google'i veebisaiti a >
document.getElementById ( 'sait' ) .addEventListener ( 'klõpsake' , funktsiooni ( tühistada ) {
cancel.preventDefault ( ) ;
} ) ;
Järgige alltoodud samme:
-
- Esiteks lisage dokumendiobjekti mudelile (DOM) kuvatav pealkiri.
- Pärast seda määrake ' URL ' kasutades ' href ” atribuut.
- Nüüd pääsete koodi JavaScripti osas juurde määratud URL-ile.
- Samuti lisage ' klõpsa sündmus URL-iga funktsiooni abil, mis kasutab funktsiooni addEventListener() ” meetod.
- Lõpuks ' preventDefault() ” rakendatakse funktsiooni parameetri abil lisatud sündmuse eraldamiseks meetodit.
Väljund
2. lähenemisviis: tühistage sündmused JavaScriptis, tagastades Boole'i väärtuse
Seda lähenemisviisi saab rakendada, tagastades vale ” Boolean väärtus käivitatud sündmusel.
Näide
Järgmised koodiread näitavad esitatud kontseptsiooni:
< Keskus >< sisend tüüp = 'tekst' kohatäide = 'Sisesta tekst' sisendis = 'tühista sündmus()' > Keskus >funktsiooni tühista sündmus ( ) {
tagasi vale ;
hoiatus ( 'Seda avaldust ei kuvata' )
}
Ülaltoodud koodilõigul:
-
- Esiteks, jaotises '
” märgend, eraldage sisestustekstiväli. - Samuti lisage ' sisendis 'sündmus koos määratud ' kohatäide ” väärtus. Selle tulemusel kutsutakse teksti sisestamisel määratud funktsioon.
- Nüüd deklareerige koodi JavaScripti osas funktsioon nimega ' cancelEvent() ”. Selle määratluses tagastage tõeväärtus ' vale ', et tühistada lisatud' sündmus ”.
- Lõpuks määrake hoiatuskastis märgitud teade. Tagastatud tõeväärtus väldib dialoogiboksi kuvamist.
- Esiteks, jaotises '
Väljund
Ülaltoodud väljundis võib täheldada, et avatud funktsiooni korral ei kuvata hoiatuse dialoogiboksi, mis tühistab lisatud sündmuse.
3. lähenemisviis: tühistage sündmused JavaScriptis, kasutades meetodit stopPropagation().
' stopPropagation() ” meetod takistab sama sündmuse levitamist. Seda meetodit saab kasutada kahe Divi vahelise levitamise peatamiseks pärast märkeruudu märkimist.
Süntaks
event.stopLevimine ( )
Näide
Jälgige järgmisi koodiridu:
< Keskus >< h3 > Muudatuse jälgimiseks klõpsake veebisaidil: h3 >< div onclick = 'element2()' > Linux
< div onclick = 'element1(sündmus)' > Veebisait div >
div >
< br >
Paljundamise peatamiseks märkige:
< sisend tüüp = 'märkeruut' id = 'Kontrollima' >
Keskus >
-
- Esimeses etapis lisage samamoodi märgitud pealkiri.
- Nüüd lisage kaks ' div ' sildid lisatud ' onclick ” sündmused, millest igaüks kutsub kahte erinevat funktsiooni element2() ja element1().
- Lisage ka määratud ID-ga märkeruut. See märkeruut peatab levitamise kahe div vahel.
Nüüd vaadake järgmisi JavaScripti koodiridu:
funktsiooni element1 ( ja ) {hoiatus ( 'Klõpsasite veebisaidil' ) ;
kui ( document.getElementById ( 'Kontrollima' ) .kontrollitud ) {
e.stopLevimine ( ) ;
}
}
funktsiooni element2 ( ) {
hoiatus ( 'Klõpsasite Linuxhintil' ) ;
}
Ülaltoodud js-koodis:
-
- Määrake funktsioon nimega ' element1() ”. Siin on parameeter ' ja ' viitab ' sündmus ” käivitatakse koodi HTML-osas.
- Selle määratluses kuvage hoiatuste dialoogiboks, millel on märgitud teade.
- Pärast seda avage loodud märkeruut selle ID abil, kasutades ' getElementById() ” meetod. Rakendage ka ' kontrollitud ” atribuuti, et kontrollida märgitud märkeruudu seisukorda.
- Seejärel rakendage ' stopPropagation() ' meetod, mis viitab parameetrile ' ja ”. Selle tulemusel peatatakse levik ühest funktsioonist teise.
- Samamoodi määratlege teine funktsioon ' element2() ” edasi levitada. See funktsioon toimib ainult enne levitamist.
Väljund
Siin jälgib käitumist div klõpsamisel märkeruudu märkimisel.
Oleme koostanud lähenemisviisid sündmuste tühistamiseks JavaScriptis.
Järeldus
' preventDefault() meetod, ' tõeväärtus ' lähenemine või ' stopPropagation() ” meetodit saab kasutada sündmuste tühistamiseks JavaScriptis. Esimest meetodit saab rakendada lisatud sündmuse eemaldamiseks, mille tulemuseks on lingi keelamine. Tõeväärtuse lähenemine tagastab ' vale ” Boolean väärtus käivitatud sündmusel. Meetodit stopPropagation() saab rakendada kahe div vahel levimise peatamiseks kaasasoleva märkeruudu abil. Selles õpetuses selgitati sündmuste tühistamist JavaScriptis.