En este artículo, discutiremos los métodos PreventDefault y stopPropagation con ejemplos de código adecuados para cada condición y luego veremos la diferencia entre PreventDefault y stopPropagation.
Método preventDefault(): Es un método presente en la interfaz de eventos. Este método evita que el navegador ejecute el comportamiento predeterminado del elemento seleccionado. Este método puede cancelar el evento solo si el evento es cancelable. Por ejemplo, hay algunos eventos que no se pueden evitar, como el evento de desplazamiento y rueda.
Sintaxis:
event.preventDefault();
Parámetro: Este método no acepta ningún parámetro.
Veremos los enfoques para aplicar ambos métodos con la ayuda de los ejemplos.
Ejemplo 1: Evitar que un enlace siga a la URL para que el navegador no pueda ir a otra página.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<a id="first" href="www.geeksforgeeks.com">
GeeksForGeeks
</a>
<script>
$("#first").click(function () {
event.preventDefault();
alert("Event prevented, Can't go there.");
});
</script>
</body>
</html>
Producción:
Ejemplo 2: Evita que el usuario marque las casillas de verificación. Por lo general, cuando hacemos clic en las casillas de verificación, se alterna, pero nada funcionará, después de llamar al método preventDefault().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<input type="checkbox" id="f" />
click on this box
<script>
$("#f").click(function () {
event.preventDefault();
alert("Event prevented");
});
</script>
</body>
</html>
Producción:
método de evento stopPropagation(): este método se utiliza para evitar que el elemento principal acceda al evento. Básicamente, este método se usa para evitar que se llame a la propagación del mismo evento. Por ejemplo, tenemos un elemento de botón dentro de una etiqueta div y hay un evento onclick en ambos, luego cada vez que intentamos activar el evento adjunto al elemento de botón , entonces el evento adjunto al elemento div también se ejecuta porque div es el padre del elemento de botón.
sintaxis:
event.stopPropagation();
Podemos resolver este problema usando el método stopPropagation() porque esto evitará que el padre acceda al evento.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<div class="first" onclick="functionFirst()">
<button onclick="functionSecond()">
Button
</button>
</div>
<script>
function functionSecond() {
alert("button hello");
}
function functionFirst() {
alert("div hello");
}
</script>
</body>
</html>
Producción:
Aquí, después de hacer clic en el botón, se ejecutarán ambas funciones.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<div class="first" onclick="functionFirst()">
<button onclick="functionSecond()">
Button
</button>
</div>
<script>
function functionSecond() {
event.stopPropagation();
alert("button hello");
}
function functionFirst() {
alert("div hello");
}
</script>
</body>
</html>
Producción:
Ahora, en este caso, hemos agregado un método event.stopPropagation() , luego se ejecutará la única función del elemento del botón .
Diferencia entre los métodos preventDefault() y stopPropagation():
|
Método event.preventDefault() |
método event.stopPropagation() |
|---|---|
| Evite que la acción predeterminada de los navegadores tome ese evento. | Impedir una mayor propagación de los eventos actuales por parte de los elementos principales o secundarios. |
| Es un método presente en la interfaz de eventos. | Este método también está presente en la interfaz de eventos. |
| Por ejemplo, evita que el navegador siga un enlace. | No puede detener el comportamiento predeterminado del navegador. |
|
Su sintaxis es -: event.preventDefault(); |
Su sintaxis es -: event.stopPropagation(); |
| Este método no toma ningún parámetro. | Este método tampoco toma ningún argumento en su definición. |
| Sus navegadores compatibles son: Chrome, Firefox, Safari, Opera, etc. | Sus navegadores compatibles son: Chrome, Firefox, Safari, Opera, etc. |
| No devuelve valor | No tiene ningún tipo de retorno. |
| Utiliza la versión DOM de DOM Level 3 Events | Utiliza la versión DOM de DOM Nivel 2 Eventos |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA