Cómo cancelar los eventos en JavaScript?

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, la cancelación de los eventos en JavaScript hace maravillas al deshabilitar alguna funcionalidad y manejar tales escenarios de casos.

Cómo cancelar los eventos en JavaScript?

Los siguientes enfoques se pueden utilizar para cancelar eventos en JavaScript:

• • "PreventDefault ()" método.
  • "Valor booleano" acercarse.
  • "stopPropagation ()" método.

Enfoque 1: Cancelar eventos en JavaScript utilizando el método PreventDefault ()

El "PreventDefault ()"El método cancela el evento adjunto si es cancelable. Este método se puede utilizar para separar el evento adjunto desde el enlace accedido, evitando que la acción se realice.

Sintaxis

evento.PreventDefault ()

En la sintaxis dada:

• • "evento"Se refiere al evento para ser separado.

Ejemplo

Revisar el código-snippet a continuación:

El evento de clic se cancelará!

Visite el sitio web de Google
documento.getElementById ("Sitio").addEventListener ("hacer clic", función (cancelar)
Cancelar.prevenDefault ();
);

Siga los pasos establecidos a continuación:

• • En primer lugar, incluya el encabezado establecido que se mostrará en el modelo de objeto de documento (DOM).
  • Después de eso, especifique el "Url" utilizando el "href" atributo.
  • Ahora, en la parte de 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 utilizando el"addEventListener ()" método.
  • Finalmente, el "PreventDefault ()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 en el evento activado.

Ejemplo

Las siguientes líneas de código demuestran el concepto establecido:

función cancelEvent ()
falso retorno;
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 dará como resultado invocar la función especificada al ingresar el texto.
  • Ahora, en la parte de JavaScript del código, declare una función llamada "cancelEvent ()". En su definición, devuelva el valor booleano "FALSO"Para cancelar el incluido"evento".
  • Finalmente, especifique el mensaje indicado en el cuadro de alerta. El valor booleano devuelto dará como resultado que se muestre el cuadro de diálogo.

Producción

En la salida anterior, se puede observar que en la función accedida, el cuadro de diálogo de alerta no se muestra así cancelando el evento adjunto.

Enfoque 3: Cancelar eventos en JavaScript usando el método stopPropagation ()

El "stopPropagation ()"El método evita que se propague el mismo evento. Este método se puede utilizar para dejar de propagarse entre los dos divs al verificar la casilla de verificación.

Sintaxis

evento.stopPropagation ()

Ejemplo

Observe las siguientes líneas de código:

Haga clic en el sitio web para observar el cambio:

Linuxhint
Sitio web

• • En el primer paso, de manera similar, incluya el encabezado declarado.
  • Ahora, incluye dos "div"Etiquetas con adjunta"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 ID especificada. Esta casilla de verificación resultará en detener la propagación entre dos divs.

Ahora, mire las siguientes líneas de código JavaScript:

función element1 (e)
alerta ("Usted hizo clic en el sitio web");
if (documento.getElementById ("cheque").marcado)
mi.stopPropagation ();


función element2 ()
alerta ("Hació clic en Linuxhint");

En el código JS anterior:

• • Defina una función llamada "elemento1 ()". Aquí, el parámetro "mi" se refiere a "evento"Ser despedido especificado en la parte HTML del código.
  • En su definición, muestre el cuadro de diálogo de alerta que tiene el mensaje establecido.
  • Después de eso, acceda a la casilla de verificación creada por su ID usando el "getElementById ()" método. Además, aplique el "comprobado"Propiedad para verificar la condición de la casilla de verificación marcada.
  • Luego, aplique el "stopPropagation ()"Método que se refiere al parámetro"mi". Esto dará como resultado detener la propagación de una función a la otra función.
  • Del mismo modo, defina otra función "element2 ()"Ser propagado. Esta función será funcional antes de la propagación.

Producción

Aquí, observa el comportamiento al hacer clic en el DIV al verificar la casilla de verificación.

Hemos compilado los enfoques para cancelar eventos en JavaScript.

Conclusión

El "PreventDefault ()"Método, el"valor booleanoEnfoque "o el"stopPropagation ()El método se puede utilizar para cancelar eventos en JavaScript. El primer método se puede implementar para separar el evento adjunto, lo que resulta en deshabilitar el enlace. El enfoque de valor booleano devuelve el "FALSO"Valor booleano en el evento activado. El método stopPropagation () se puede aplicar para dejar de propagarse entre los dos divs con la ayuda de una casilla de verificación incluida. Este tutorial se explicó para cancelar eventos en JavaScript.