Pri aktualizácii webovej stránky alebo webovej lokality existujú situácie, keď niektoré zahrnuté odkazy už nie sú potrebné alebo sa stanú irelevantnými. Okrem toho efektívne riadiť návštevnosť konkrétnej webovej stránky. V takýchto prípadoch zrušenie udalostí v JavaScripte robí zázraky pri deaktivácii niektorých funkcií a spracovaní takýchto prípadových scenárov.
Ako zrušiť udalosti v JavaScripte?
Na zrušenie udalostí v JavaScripte možno použiť nasledujúce prístupy:
-
- “ preventDefault() “.
- “ Booleovská hodnota ' prístup.
- “ stopPropagation() “.
Prístup 1: Zrušenie udalostí v JavaScripte pomocou metódy preventDefault().
' preventDefault() ” metóda zruší pripojenú udalosť, ak ju možno zrušiť. Táto metóda môže byť použitá na odpojenie pripojenej udalosti od prístupného odkazu, čím sa zabráni vykonaniu akcie.
Syntax
event.preventPredvolené ( )
V danej syntaxi:
-
- “ udalosť “ označuje udalosť, ktorá sa má oddeliť.
Príklad
Prejdite si nižšie uvedený útržok kódu:
< h3 > Udalosť Click bude zrušená ! h3 >
< a id = 'stránka' href = 'https://www.google.com/' > Navštívte webovú stránku Google a >
document.getElementById ( 'stránka' ) .addEventListener ( 'klik' , funkciu ( Zrušiť ) {
cancel.preventPredvolené ( ) ;
} ) ;
Postupujte podľa nižšie uvedených krokov:
-
- Najprv zahrňte uvedený nadpis, ktorý sa má zobraziť na modeli objektu dokumentu (DOM).
- Potom špecifikujte „ URL “ pomocou „ href “.
- Teraz v časti kódu JavaScript prejdite na zadanú adresu URL.
- Pripojte tiež „ kliknite ” udalosť s URL s pomocou funkcie používajúcej “ addEventListener() “.
- Nakoniec, „ preventDefault() ” metóda sa použije s pomocou parametra funkcie na odpojenie pripojenej udalosti.
Výkon
Prístup 2: Zrušte udalosti v JavaScripte vrátením booleovskej hodnoty
Tento prístup je možné implementovať vrátením „ falošný ” boolovská hodnota pri spustenej udalosti.
Príklad
Nasledujúce riadky kódu demonštrujú uvedený koncept:
< centrum < vstup typu = 'text' zástupný symbol = 'Zadať text' na vstupe = 'zrušiťUdalosť()' > centrum >funkciu zrušiťUdalosť ( ) {
vrátiť falošný ;
upozorniť ( 'Toto vyhlásenie sa nezobrazí' )
}
Vo vyššie uvedenom útržku kódu:
-
- Po prvé, v rámci „
” prideľte vstupné textové pole. - Pripojte tiež „ na vstupe “udalosť so špecifikovaným” zástupný symbol “hodnota. Výsledkom bude vyvolanie špecifikovanej funkcie pri zadávaní textu.
- Teraz v časti kódu JavaScript deklarujte funkciu s názvom „ cancelEvent() “. Vo svojej definícii vráťte boolovskú hodnotu „ falošný “ na zrušenie zahrnutého “ udalosť “.
- Nakoniec zadajte uvedenú správu do poľa výstrahy. Vrátená boolovská hodnota spôsobí, že sa dialógové okno nebude zobrazovať.
- Po prvé, v rámci „
Výkon
Vo vyššie uvedenom výstupe je možné pozorovať, že pri vyvolanej funkcii sa nezobrazí výstražné dialógové okno, čím sa zruší pripojená udalosť.
Prístup 3: Zrušenie udalostí v JavaScripte pomocou metódy stopPropagation().
' stopPropagation() ” metóda zabraňuje šíreniu rovnakej udalosti. Táto metóda môže byť použitá na zastavenie šírenia medzi dvoma divs po začiarknutí políčka.
Syntax
event.stopPropagation ( )
Príklad
Sledujte nasledujúce riadky kódu:
< centrum < h3 > Kliknite na webovú stránku a sledujte zmenu: h3 >< div po kliknutí = 'prvok2()' > Linux
< div po kliknutí = 'prvok1(udalosť)' > webové stránky div >
div >
< br >
Začiarknutím zastavíte šírenie:
< vstup typu = 'zaškrtávacie políčko' id = 'skontrolovať' >
centrum >
-
- V prvom kroku podobne zahrňte uvedený nadpis.
- Teraz zahrňte dve „ div „značky s pripojenými“ po kliknutí ” udalosti, pričom každá z nich vyvoláva dve rôzne funkcie element2() a element1().
- Zahrňte tiež začiarkavacie políčko so zadaným ID. Toto začiarkavacie políčko bude mať za následok zastavenie šírenia medzi dvoma div.
Teraz sa pozrite na nasledujúce riadky kódu JavaScript:
funkciu prvok1 ( a ) {upozorniť ( „Klikli ste na webovú stránku“ ) ;
ak ( document.getElementById ( 'skontrolovať' ) .kontrolované ) {
e.stopPropagation ( ) ;
}
}
funkciu prvok2 ( ) {
upozorniť ( 'Klikli ste na Linuxhint' ) ;
}
Vo vyššie uvedenom js kóde:
-
- Definujte funkciu s názvom „ prvok1() “. Tu je parameter „ a “ odkazuje na „ udalosť “, ktorý je spustený v časti HTML kódu.
- Vo svojej definícii zobrazí dialógové okno výstrahy s uvedenou správou.
- Potom prejdite k vytvorenému začiarkavaciemu políčku pomocou jeho ID pomocou „ getElementById() “. Tiež použite „ skontrolované “, aby ste skontrolovali stav začiarknutého políčka.
- Potom použite „ stopPropagation() “ metóda odkazujúca na parameter “ a “. Výsledkom bude zastavenie šírenia z jednej funkcie do druhej.
- Podobne definujte ďalšiu funkciu “ prvok2() “, ktoré sa majú propagovať. Táto funkcia bude funkčná len pred propagáciou.
Výkon
Tu sleduje správanie po kliknutí na div po začiarknutí políčka.
Zostavili sme prístupy na zrušenie udalostí v JavaScripte.
Záver
' preventDefault() “ metóda, “ boolovská hodnota “, alebo “ stopPropagation() ” metóda môže byť použitá na zrušenie udalostí v JavaScripte. Prvú metódu možno implementovať na odpojenie pripojenej udalosti, čo vedie k zakázaniu prepojenia. Prístup booleovskej hodnoty vráti „ falošný ” boolovská hodnota pri spustenej udalosti. Metódu stopPropagation() možno použiť na zastavenie šírenia medzi dvoma divs pomocou zahrnutého začiarkavacieho políčka. Tento návod vysvetľuje, ako zrušiť udalosti v JavaScripte.