Hur avbryter jag evenemang i JavaScript?

När du uppdaterar en webbsida eller webbplats finns det situationer där vissa inkluderade länkar inte längre behövs eller blir irrelevanta. Utöver det, hantera trafiken på en viss webbplats effektivt. I sådana fall gör det underverk att avbryta händelserna i JavaScript när det gäller att inaktivera viss funktionalitet och hantera sådana fallscenarier.

Hur avbryter jag evenemang i JavaScript?

Följande metoder kan användas för att avbryta händelser i JavaScript:

- ' preventDefault() 'metoden.
- ' booleskt värde ' närma sig.
- ' stopPropagation() 'metoden.

Metod 1: Avbryt händelser i JavaScript med preventDefault()-metoden

den ' preventDefault() ”-metoden avbryter den bifogade händelsen om den kan avbrytas. Denna metod kan användas för att koppla bort den bifogade händelsen från den åtkomliga länken och därigenom förhindra att åtgärden utförs.

Syntax

event.preventDefault ( )

I den givna syntaxen:

- ' händelse ” hänvisar till händelsen som ska frikopplas.

Exempel

Gå igenom nedanstående kodavsnitt:

< h3 > Click-evenemanget kommer att ställas in ! h3 >
< a id = 'webbplats' href = 'https://www.google.com/' > Besök Googles webbplats a >
document.getElementById ( 'webbplats' ) .addEventListener ( 'klick' , fungera ( Avbryt ) {
cancel.preventDefault ( ) ;
} ) ;

Följ stegen nedan:

- Inkludera först den angivna rubriken som ska visas på Document Object Model (DOM).
- Efter det, ange ' URL ' använda ' href ' attribut.
- Gå nu till den angivna URL:en i JavaScript-delen av koden.
- Bifoga också en ' klick ' händelse med URL:en med hjälp av en funktion som använder ' addEventListener() 'metoden.
- Slutligen, ' preventDefault() ”-metoden kommer att tillämpas med hjälp av funktionens parameter för att koppla bort den bifogade händelsen.

Produktion

Metod 2: Avbryt händelser i JavaScript genom att returnera ett booleskt värde

Detta tillvägagångssätt kan implementeras genom att returnera ' falsk ” booleskt värde på den utlösta händelsen.

Exempel

Följande kodrader visar det angivna konceptet:

< Centrum >< inmatning typ = 'text' Platshållare = 'Skriv text' oningång = 'cancelEvent()' > Centrum >
fungera avbrytEvent ( ) {
lämna tillbaka falsk ;
varna ( 'Detta uttalande kommer inte att visas' )
}

I kodavsnittet ovan:

- Först inom ' ”-tagg, allokera ett inmatningstextfält.
- Bifoga också en ' oningång ' händelse med den angivna ' Platshållare ' värde. Detta kommer att resultera i att den angivna funktionen anropas vid inmatning av texten.
- Nu, i JavaScript-delen av koden, deklarera en funktion som heter ' cancelEvent() ”. I dess definition, returnera det booleska värdet ' falsk ' för att avbryta den medföljande ' händelse ”.
- Ange slutligen det angivna meddelandet i varningsrutan. Det returnerade booleska värdet kommer att leda till att dialogrutan inte visas.

Produktion

I ovanstående utdata kan det observeras att vid den åtkomst till funktionen visas inte varningsdialogrutan, vilket avbryter den bifogade händelsen.

Metod 3: Avbryt händelser i JavaScript med stopPropagation()-metoden

den ' stopPropagation() ”-metoden förhindrar att samma händelse sprids. Denna metod kan användas för att stoppa spridningen mellan de två diverna när du markerar kryssrutan.

Syntax

event.stopPropagation ( )

Exempel

Observera följande kodrader:

< Centrum >< h3 > Klicka på webbplatsen för att se förändringen: h3 >
< div onclick = 'element2()' > Linux
< div onclick = 'element1(händelse)' > Hemsida div >
div >
< br >
Markera för att stoppa spridningen:
< inmatning typ = 'kryssruta' id = 'kolla upp' >
Centrum >

- I det första steget, inkludera på samma sätt den angivna rubriken.
- Inkludera nu två ' div ' taggar med bifogade ' onclick ” händelser där var och en av dem anropar två olika funktioner element2() och element1().
- Inkludera också en kryssruta med angivet ID. Den här kryssrutan kommer att resultera i att spridningen mellan två divs stoppas.

Titta nu på följande JavaScript-kodrader:

fungera element1 ( och ) {
varna ( 'Du klickade på webbplatsen' ) ;
om ( document.getElementById ( 'kolla upp' ) .kontrollerade ) {
e.stopPropagation ( ) ;
}
}
fungera element2 ( ) {
varna ( 'Du klickade på Linuxhint' ) ;
}

I ovanstående js-kod:

- Definiera en funktion som heter ' element1() ”. Här är parametern ' och ' hänvisar till ' händelse ” avfyras som anges i HTML-delen av koden.
- I dess definition, visa varningsdialogrutan med det angivna meddelandet.
- Efter det, gå till den skapade kryssrutan med dess id med hjälp av ' getElementById() 'metoden. Använd också ' kontrollerade ” egendom till den för att kontrollera skicket för den kryssade kryssrutan.
- Använd sedan ' stopPropagation() ' metod som refererar till parametern ' och ”. Detta kommer att resultera i att spridningen från en funktion till den andra funktionen stoppas.
- På samma sätt, definiera en annan funktion ' element2() ” att spridas på. Denna funktion kommer endast att fungera före spridning.

Produktion

Här observerar du beteendet när du klickar på div när du markerar kryssrutan.

Vi har sammanställt metoderna för att avbryta evenemang i JavaScript.

Slutsats

den ' preventDefault() 'metoden, ' booleskt värde ' tillvägagångssätt, eller ' stopPropagation() ”-metoden kan användas för att avbryta händelser i JavaScript. Den första metoden kan implementeras för att koppla bort den bifogade händelsen vilket resulterar i att länken inaktiveras. Det booleska värdet returnerar ' falsk ” booleskt värde på den utlösta händelsen. Metoden stopPropagation() kan användas för att stoppa spridningen mellan de två diverna med hjälp av en inkluderad kryssruta. Denna handledning förklarade hur man avbryter händelser i JavaScript.

Hur avbryter jag evenemang i JavaScript?