Al actualizar una página web o el sitio web, hay situaciones en las que algunos enlaces incluidos ya no son necesarios o se vuelven irrelevantes. Además de eso, administrar el tráfico de un sitio web en particular de manera efectiva. En tales casos, cancelar los eventos en JavaScript hace maravillas al deshabilitar algunas funciones y manejar tales escenarios de casos.
¿Cómo cancelar eventos en JavaScript?
Los siguientes enfoques se pueden utilizar para cancelar eventos en JavaScript:
-
- “ prevenirPredeterminado() ' método.
- “ Valor booleano ' Acercarse.
- “ detener la propagación () ' método.
Enfoque 1: cancelar eventos en JavaScript utilizando el método preventDefault()
Los ' prevenirPredeterminado() El método cancela el evento adjunto si es cancelable. Este método se puede utilizar para separar el evento adjunto del enlace al que se accede, evitando así que se realice la acción.
Sintaxis
event.preventDefault ( )
En la sintaxis dada:
-
- “ evento ” se refiere al evento que se va a separar.
Ejemplo
Vaya a través del fragmento de código dado a continuación:
< h3 > El evento Click será cancelado ! h3 >
< a identificación = 'sitio' href = 'https://www.google.com/' > Visite el sitio web de Google a >
documento.getElementById ( 'sitio' ) .addEventListener ( 'hacer clic' , función ( cancelar ) {
cancel.preventDefault ( ) ;
} ) ;
Siga los pasos indicados a continuación:
-
- En primer lugar, incluya el encabezado indicado que se mostrará en el Modelo de objeto del documento (DOM).
- Después de eso, especifique el “ URL ' utilizando el ' href ' atributo.
- Ahora, en la parte JavaScript del código, acceda a la URL especificada.
- Además, adjunte un “ hacer clic ” evento con la URL con la ayuda de una función usando el “ agregarEventListener() ' método.
- Finalmente, el ' prevenirPredeterminado() El método ” se aplicará con la ayuda del parámetro de la función para separar el evento adjunto.
Producción
Enfoque 2: cancelar eventos en JavaScript devolviendo un valor booleano
Este enfoque se puede implementar devolviendo el ' falso ” valor booleano sobre el evento desencadenado.
Ejemplo
Las siguientes líneas de código demuestran el concepto establecido:
< centro >< aporte escribe = 'texto' marcador de posición = 'Ingrese texto' en la entrada = 'cancelarEvento()' > centro >función cancelar evento ( ) {
devolver falso ;
alerta ( 'Esta declaración no se mostrará' )
}
En el fragmento de código anterior:
-
- Primero, dentro del “
” etiqueta, asigne un campo de texto de entrada. - Además, adjunte un “ en la entrada ” evento con el especificado “ marcador de posición ' valor. Esto resultará en la invocación de la función especificada al ingresar el texto.
- Ahora, en la parte JavaScript del código, declara una función llamada “ cancelarEvento() ”. En su definición, devuelve el valor booleano “ falso ” para cancelar el incluido “ evento ”.
- Finalmente, especifique el mensaje indicado en el cuadro de alerta. El valor booleano devuelto evitará que se muestre el cuadro de diálogo.
- Primero, dentro del “
Producción
En el resultado anterior, se puede observar que al acceder a la función, el cuadro de diálogo de alerta no se muestra, por lo que se cancela el evento adjunto.
Enfoque 3: cancelar eventos en JavaScript utilizando el método stopPropagation()
Los ' detener la propagación () El método evita que se propague el mismo evento. Este método se puede utilizar para detener la propagación entre los dos div al marcar la casilla de verificación.
Sintaxis
event.stopPropagation ( )
Ejemplo
Observe las siguientes líneas de código:
< centro >< h3 > Haga clic en el sitio web para observar el cambio: h3 >< división al hacer clic = 'elemento2()' > linux
< división al hacer clic = 'elemento1 (evento)' > Sitio web división >
división >
< hermano >
Marque para detener la propagación:
< aporte escribe = 'caja' identificación = 'controlar' >
centro >
-
- En el primer paso, de manera similar, incluya el encabezado indicado.
- Ahora, incluye dos “ división ” etiquetas con adjunto “ al hacer clic ” eventos con cada uno de ellos invocando dos funciones diferentes element2() y element1().
- Además, incluya una casilla de verificación con la identificación especificada. Esta casilla de verificación hará que se detenga la propagación entre dos divs.
Ahora, mira las siguientes líneas de código JavaScript:
función elemento1 ( y ) {alerta ( 'Ha hecho clic en el sitio web' ) ;
si ( documento.getElementById ( 'controlar' ) .comprobado ) {
e.stopPropagation ( ) ;
}
}
función elemento2 ( ) {
alerta ( 'Hiciste clic en Linuxhint' ) ;
}
En el código js anterior:
-
- Defina una función llamada “ elemento1() ”. Aquí, el parámetro “ y ' se refiere a ' evento ” siendo despedido especificado en la parte HTML del código.
- En su definición, mostrar el cuadro de diálogo de alerta con el mensaje indicado.
- Después de eso, acceda a la casilla de verificación creada por su ID usando el ' getElementById() ' método. Además, aplica el “ comprobado ” para verificar la condición de la casilla de verificación marcada.
- Luego, aplica el “ detener la propagación () ” método referente al parámetro “ y ”. Esto resultará en detener la propagación de una función a la otra función.
- Del mismo modo, defina otra función ' elemento2() ” para ser propagado. Esta función será funcional antes de la propagación solamente.
Producción
Aquí, observa el comportamiento al hacer clic en el div al marcar la casilla de verificación.
Hemos compilado los enfoques para cancelar eventos en JavaScript.
Conclusión
Los ' prevenirPredeterminado() ” método, el “ valor booleano ” enfoque, o el “ detener la propagación () El método ” se puede utilizar para cancelar eventos en JavaScript. El primer método se puede implementar para desconectar el evento adjunto y deshabilitar el enlace. El enfoque de valor booleano devuelve el ' falso ” valor booleano sobre el evento desencadenado. El método stopPropagation() se puede aplicar para detener la propagación entre los dos divs con la ayuda de una casilla de verificación incluida. Este tutorial explica cómo cancelar eventos en JavaScript.