Hvordan kansellere hendelser i JavaScript?

Når du oppdaterer en nettside eller nettstedet, er det situasjoner der noen inkluderte lenker ikke lenger er nødvendige eller blir irrelevante. I tillegg til det, effektivt administrere trafikken til et bestemt nettsted. I slike tilfeller kan det å avbryte hendelsene i JavaScript gjøre underverker ved å deaktivere noe funksjonalitet og håndtere slike saksscenarier.

Hvordan kansellere hendelser i JavaScript?

Følgende tilnærminger kan brukes for å avbryte hendelser i JavaScript:

- ' preventDefault() 'metoden.
- ' Boolsk verdi ' nærme seg.
- ' stopPropagation() 'metoden.

Tilnærming 1: Avbryt hendelser i JavaScript ved å bruke preventDefault()-metoden

« preventDefault() ”-metoden avbryter den vedlagte hendelsen hvis den kan avbrytes. Denne metoden kan brukes til å koble den vedlagte hendelsen fra den åpnede lenken og dermed forhindre at handlingen utføres.

Syntaks

event.preventDefault ( )

I den gitte syntaksen:

- ' begivenhet ” refererer til hendelsen som skal løsrives.

Eksempel

Gå gjennom kodebiten nedenfor:

< h3 > Click-arrangementet vil bli avlyst ! h3 >
< en id = 'nettstedet' href = 'https://www.google.com/' > Besøk Googles nettsted en >
document.getElementById ( 'nettstedet' ) .addEventListener ( 'klikk' , funksjon ( Avbryt ) {
cancel.preventDefault ( ) ;
} ) ;

Følg trinnene nedenfor:

- Ta først med den oppgitte overskriften som skal vises på Document Object Model (DOM).
- Etter det, spesifiser ' URL ' bruker ' href ' Egenskap.
- Nå, i JavaScript-delen av koden, får du tilgang til den angitte URL-adressen.
- Legg også ved en ' klikk '-hendelse med URL-en ved hjelp av en funksjon som bruker ' addEventListener() 'metoden.
- Til slutt, ' preventDefault() ”-metoden vil bli brukt ved hjelp av funksjonens parameter for å fjerne den vedlagte hendelsen.

Produksjon

Tilnærming 2: Avbryt hendelser i JavaScript ved å returnere en boolsk verdi

Denne tilnærmingen kan implementeres ved å returnere ' falsk ” boolsk verdi ved den utløste hendelsen.

Eksempel

Følgende kodelinjer demonstrerer det oppgitte konseptet:

< senter >< input type = 'tekst' plassholder = 'Skriv inn tekst' på inngang = 'avbrytEvent()' > senter >
funksjon avbrytEvent ( ) {
komme tilbake falsk ;
varsling ( 'Denne uttalelsen vil ikke bli vist' )
}

I kodebiten ovenfor:

- Først innenfor ' ”-tag, tilordne et tekstfelt for inndata.
- Legg også ved en ' på inngang ' hendelse med spesifisert ' plassholder 'verdi. Dette vil resultere i å påkalle den spesifiserte funksjonen når du skriver inn teksten.
- Nå, i JavaScript-delen av koden, erklærer du en funksjon kalt ' cancelEvent() '. I sin definisjon, returner den boolske verdien ' falsk ' for å avbryte den inkluderte ' begivenhet '.
- Til slutt spesifiser den oppgitte meldingen i varselboksen. Den returnerte boolske verdien vil føre til at dialogboksen ikke vises.

Produksjon

I utgangen ovenfor kan det observeres at når funksjonen er åpnet, vises ikke varslingsdialogboksen, noe som kansellerer den vedlagte hendelsen.

Tilnærming 3: Avbryt hendelser i JavaScript ved å bruke stopPropagation()-metoden

« stopPropagation() ”-metoden forhindrer at den samme hendelsen spres. Denne metoden kan brukes til å slutte å forplante seg mellom de to divene ved å merke av i avmerkingsboksen.

Syntaks

event.stopForplantning ( )

Eksempel

Vær oppmerksom på følgende kodelinjer:

< senter >< h3 > Klikk på nettsiden for å se endringen: h3 >
< div ved trykk = 'element2()' > Linux
< div ved trykk = 'element1(hendelse)' > Nettsted div >
div >
< br >
Merk av for å stoppe spredning:
< input type = 'avmerkingsboks' id = 'kryss av' >
senter >

- I det første trinnet, ta på samme måte den angitte overskriften.
- Ta med to ' div ' tags med vedlagt ' ved trykk ” hendelser der hver av dem påkaller to forskjellige funksjoner element2() og element1().
- Inkluder også en avmerkingsboks med den angitte ID-en. Denne avmerkingsboksen vil resultere i å stoppe utbredelsen mellom to div.

Se nå på følgende JavaScript-kodelinjer:

funksjon element1 ( og ) {
varsling ( 'Du klikket på nettstedet' ) ;
hvis ( document.getElementById ( 'kryss av' ) .sjekket ) {
e.stoppropagation ( ) ;
}
}
funksjon element2 ( ) {
varsling ( 'Du klikket Linuxhint' ) ;
}

I js-koden ovenfor:

- Definer en funksjon kalt ' element1() '. Her er parameteren ' og ' refererer til ' begivenhet ” blir avfyrt spesifisert i HTML-delen av koden.
- I sin definisjon, vis varseldialogboksen med den angitte meldingen.
- Deretter får du tilgang til den opprettede avmerkingsboksen ved å bruke ID-en ved å bruke ' getElementById() 'metoden. Bruk også ' sjekket ”-egenskapen til den for å sjekke tilstanden til den avmerkede avmerkingsboksen.
- Deretter bruker du ' stopPropagation() ' metode som refererer til parameteren ' og '. Dette vil resultere i å stoppe forplantningen fra en funksjon til den andre funksjonen.
- På samme måte, definer en annen funksjon ' element2() ' som skal forplantes på. Denne funksjonen vil kun være funksjonell før forplantning.

Produksjon

Her observerer oppførselen ved å klikke på div ved å merke av i avmerkingsboksen.

Vi har samlet tilnærmingene for å kansellere arrangementer i JavaScript.

Konklusjon

« preventDefault() 'metoden, ' boolsk verdi '-tilnærming, eller ' stopPropagation() metoden kan brukes til å avbryte hendelser i JavaScript. Den første metoden kan implementeres for å frakoble den vedlagte hendelsen, noe som resulterer i deaktivering av koblingen. Den boolske verditilnærmingen returnerer ' falsk ” boolsk verdi ved den utløste hendelsen. StopPropagation()-metoden kan brukes for å stoppe propagering mellom de to divene ved hjelp av en inkludert avkrysningsboks. Denne opplæringen forklarte å avbryte hendelser i JavaScript.

Hvordan kansellere hendelser i JavaScript?