Mentre actualitzeu una pàgina web o el lloc web, hi ha situacions en què alguns enllaços inclosos ja no són necessaris o esdevenen irrellevants. A més d'això, gestionar el trànsit d'un lloc web concret de manera eficaç. En aquests casos, cancel·lar els esdeveniments a JavaScript fa meravelles en desactivar algunes funcionalitats i gestionar aquests casos.
Com cancel·lar esdeveniments a JavaScript?
Es poden utilitzar els enfocaments següents per cancel·lar esdeveniments a JavaScript:
-
- “ preventDefault() ” mètode.
- “ Valor booleà enfocament.
- “ stopPropagation () ” mètode.
Enfocament 1: cancel·lar esdeveniments a JavaScript mitjançant el mètode preventDefault().
El ' preventDefault() ” el mètode cancel·la l'esdeveniment adjunt si es pot cancel·lar. Aquest mètode es pot utilitzar per separar l'esdeveniment adjunt de l'enllaç al qual s'accedeix, evitant així que es realitzi l'acció.
Sintaxi
event.preventDefault ( )
En la sintaxi donada:
-
- “ esdeveniment ” es refereix a l'esdeveniment a separar.
Exemple
Consulteu el fragment de codi que es mostra a continuació:
< h3 > L'esdeveniment Clic es cancel·larà ! h3 >
< a id = 'lloc' href = 'https://www.google.com/' > Visiteu el lloc web de Google a >
document.getElementById ( 'lloc' ) .addEventListener ( 'clic' , funció ( cancel · lar ) {
cancel.preventDefault ( ) ;
} ) ;
Seguiu els passos que s'indiquen a continuació:
-
- En primer lloc, inclou l'encapçalament indicat que es mostrarà al Model d'objectes de document (DOM).
- Després d'això, especifiqueu el ' URL ' utilitzant el ' href ” atribut.
- Ara, a la part JavaScript del codi, accediu a l'URL especificat.
- També adjunteu un ' feu clic ” esdeveniment amb l'URL amb l'ajuda d'una funció que utilitza el “ addEventListener() ” mètode.
- Finalment, el “ preventDefault() ” s'aplicarà amb l'ajuda del paràmetre de la funció per separar l'esdeveniment adjunt.
Sortida
Enfocament 2: cancel·leu esdeveniments a JavaScript retornant un valor booleà
Aquest enfocament es pot implementar retornant el ' fals ” valor booleà a l'esdeveniment activat.
Exemple
Les següents línies de codi demostren el concepte indicat:
< centre >< entrada tipus = 'text' posseïdor del lloc = 'Introdueix text' a l'entrada = 'cancel·laEvent()' > centre >funció cancelEvent ( ) {
tornar fals ;
alerta ( 'Aquesta declaració no es mostrarà' )
}
Al fragment de codi anterior:
-
- En primer lloc, dins del '
”, assigneu un camp de text d'entrada. - També adjunteu un ' a l'entrada ” esdeveniment amb el “ especificat posseïdor del lloc ” valor. Això resultarà en invocar la funció especificada en introduir el text.
- Ara, a la part JavaScript del codi, declareu una funció anomenada ' cancelEvent() ”. En la seva definició, retorna el valor booleà ' fals 'per cancel·lar l'inclòs' esdeveniment ”.
- Finalment, especifiqueu el missatge indicat al quadre d'alerta. El valor booleà retornat evitarà que es mostri el quadre de diàleg.
- En primer lloc, dins del '
Sortida
A la sortida anterior, es pot observar que quan s'accedeix a la funció, el quadre de diàleg d'alerta no es mostra, cancel·lant així l'esdeveniment adjunt.
Enfocament 3: cancel·lar esdeveniments a JavaScript mitjançant el mètode stopPropagation().
El ' stopPropagation () ” evita que es propagui el mateix esdeveniment. Aquest mètode es pot utilitzar per aturar la propagació entre els dos divs en marcar la casella de selecció.
Sintaxi
event.stopPropagation ( )
Exemple
Observeu les següents línies de codi:
< centre >< h3 > Feu clic al lloc web per observar el canvi: h3 >< div fent clic = 'element2()' > Linux
< div fent clic = 'element1(esdeveniment)' > Lloc web div >
div >
< br >
Comproveu per aturar la propagació:
< entrada tipus = 'casilla de verificació' id = 'comprovar' >
centre >
-
- En el primer pas, de la mateixa manera, inclou l'encapçalament indicat.
- Ara, inclou dos ' div 'etiquetes amb adjunt' fent clic ” esdeveniments amb cadascun d'ells invocant dues funcions diferents element2() i element1().
- A més, inclou una casella de selecció amb l'identificador especificat. Aquesta casella de selecció aturarà la propagació entre dos divs.
Ara, mireu les següents línies de codi JavaScript:
funció element 1 ( i ) {alerta ( 'Has fet clic al lloc web' ) ;
si ( document.getElementById ( 'comprovar' ) .comprovat ) {
e.stopPropagation ( ) ;
}
}
funció element 2 ( ) {
alerta ( 'Has fet clic a Linuxhint' ) ;
}
Al codi js anterior:
-
- Definiu una funció anomenada ' element 1() ”. Aquí, el paràmetre ' i ' es refereix a ' esdeveniment ” s'està disparant especificat a la part HTML del codi.
- En la seva definició, mostra el quadre de diàleg d'alerta amb el missatge indicat.
- Després d'això, accediu a la casella de selecció creada amb el seu identificador mitjançant el ' getElementById() ” mètode. A més, apliqueu el ' comprovat ” per comprovar l'estat de la casella de selecció marcada.
- A continuació, apliqueu el ' stopPropagation () ' mètode que fa referència al paràmetre ' i ”. Això resultarà en aturar la propagació d'una funció a l'altra funció.
- De la mateixa manera, definiu una altra funció ' element 2() ” per propagar-se. Aquesta funció només serà funcional abans de la propagació.
Sortida
Aquí, observa el comportament en fer clic al div en marcar la casella de selecció.
Hem compilat els enfocaments per cancel·lar esdeveniments en JavaScript.
Conclusió
El ' preventDefault() mètode ', el ' valor booleà enfocament, o el stopPropagation () ” es pot utilitzar per cancel·lar esdeveniments en JavaScript. El primer mètode es pot implementar per separar l'esdeveniment adjunt que resulta en desactivar l'enllaç. L'enfocament del valor booleà retorna el ' fals ” valor booleà a l'esdeveniment activat. El mètode stopPropagation() es pot aplicar per aturar la propagació entre els dos divs amb l'ajuda d'una casella de selecció inclosa. En aquest tutorial s'explica com cancel·lar esdeveniments en JavaScript.