Hvordan avbryte hendelser i JavaScript?

Hvordan avbryte hendelser i JavaScript?

Mens du oppdaterer en webside eller nettstedet, er det situasjoner der noen inkluderte lenker ikke lenger er nødvendig eller blir irrelevante. I tillegg til det, administrerer trafikken på et bestemt nettsted effektivt. I slike tilfeller gjør det å deaktivere noen funksjonalitet og håndtere slike sakscenarier i JavaScript i å deaktivere noen funksjonalitet og håndtere slike case -scenarier.

Hvordan avbryte hendelser i JavaScript?

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

    • PreventDefault ()”Metode.
    • Boolsk verdi" nærme seg.
    • stopPropagation ()”Metode.

Tilnærming 1: Avbryt hendelser i JavaScript ved bruk av PreventDefault () -metode

PreventDefault ()”Metode kansellerer den vedlagte hendelsen hvis den kan avbryte. Denne metoden kan brukes til å løsne den vedlagte hendelsen fra den tilgjengelige lenken og dermed forhindre at handlingen skal utføres.

Syntaks

begivenhet.PreventDefault ()


I den gitte syntaks:

    • begivenhet”Henviser til hendelsen som skal løsrives.

Eksempel

Gå gjennom den undergitte kodesnippet:

Klikkhendelsen vil bli kansellert!


Besøk Google -nettstedet
dokument.getElementById ("Site").AddEventListener ("klikk", funksjon (avbryt)
Avbryt.PreventDefault ();
);


Følg de under-uttalte trinnene:

    • For det første, inkluder den angitte overskriften som skal vises på dokumentobjektsmodellen (DOM).
    • Etter det, spesifiser “URL" bruker "href" Egenskap.
    • Nå, i JavaScript -delen av koden, får du tilgang til den spesifiserte URL -en.
    • Fest også en "Klikk”Hendelse med URL -en ved hjelp av en funksjon ved å bruke“AddEventListener ()”Metode.
    • Endelig "PreventDefault ()”Metoden vil bli brukt ved hjelp av funksjonens parameter for å løsne 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 på den utløste hendelsen.

Eksempel

Følgende kodelinjer demonstrerer det uttalte konseptet:


funksjon Cancelevent ()
return falsk;
varsel ("Denne uttalelsen vises ikke")


I ovennevnte kodebit:

    • Først innenfor "”Tag, tildel et inngangstekstfelt.
    • Fest også en "Oninput”Hendelse med den spesifiserte”stedholder”Verdi. Dette vil resultere i å påkalle den spesifiserte funksjonen ved å legge inn teksten.
    • Nå, i JavaScript -delen av koden, erklærer en funksjon som heter “Avbryt ()”. I sin definisjon, returner den boolske verdien “falsk”For å kansellere det medfølgende“begivenhet”.
    • Til slutt, spesifiser den oppgitte meldingen i varslingsboksen. Den returnerte boolske verdien vil føre til at du unngår dialogboksen som skal vises.

Produksjon


I outputten ovenfor kan det observeres at ved den tilgjengelige funksjonen vises ikke den varslende dialogboksen.

Tilnærming 3: Avbryt hendelser i JavaScript ved hjelp av stopPropagation () -metode

stopPropagation ()”Metode forhindrer at den samme hendelsen blir forplantet. Denne metoden kan brukes til å slutte.

Syntaks

begivenhet.stopPropagation ()


Eksempel

Observer følgende kodelinjer:

Klikk på nettstedet for å observere endringen:


Linuxhint
Nettsted




Sjekk for å stoppe forplantning:

    • I det første trinnet, på samme måte, inkluderer den oppgitte overskriften.
    • Inkluderer nå to "div”Tagger med vedlagt”ved trykk”Hendelser med hver av dem som påkaller to forskjellige funksjoner Element2 () og Element1 ().
    • Ta også med en avkrysningsrute med den spesifiserte IDen. Denne avkrysningsruten vil resultere i å stoppe forplantningen mellom to DIV -er.

Se nå på følgende JavaScript -linjer med kode:

funksjonselement1 (e)
ALERT ("Du klikket nettsted");
hvis (dokument.getElementById ("Sjekk").krysset av)
e.stopPropagation ();


funksjon element2 ()
Alert ("Du klikket Linuxhint");


I ovennevnte JS -kode:

    • Definere en funksjon som heter “Element1 ()”. Her, parameteren “e”Refererer til“begivenhet”Å bli sparket spesifisert i HTML -delen av koden.
    • I sin definisjon kan du vise varslingsdialogboksen som har den oppgitte meldingen.
    • Etter det får du tilgang til den opprettede avkrysningsruten av ID -en sin ved å bruke “getElementById ()”Metode. Bruk også “krysset av”Eiendom til det for å sjekke tilstanden til avkrysningsruten.
    • Deretter bruker du “stopPropagation ()”Metode som refererer til parameteren”e”. Dette vil resultere i å stoppe forplantningen fra den ene funksjonen til den andre funksjonen.
    • Tilsvarende definer en annen funksjon "Element2 ()”Å bli forplantet på. Denne funksjonen vil bare være funksjonell før forplantning.

Produksjon


Her observerer oppførselen når du klikker på Div når du merker av i avmerkingsboksen.

Vi har samlet tilnærmingene for å avbryte hendelser i JavaScript.

Konklusjon

PreventDefault ()”Metode,“boolsk verdi”Tilnærming, eller“stopPropagation ()”Metode kan brukes til å avbryte hendelser i JavaScript. Den første metoden kan implementeres for å løsne den vedlagte hendelsen, noe som resulterer i å deaktivere lenken. Den boolske verdi -tilnærmingen returnerer “falsk”Boolsk verdi på den utløste hendelsen. StopPropagation () -metoden kan brukes for å stoppe forplaning mellom de to divene ved hjelp av en inkludert avkrysningsrute. Denne opplæringen forklarte å avbryte hendelser i JavaScript.