Diferencia entre Event.stopPropagation y Event.preventDefault

En ocasiones puede resultar muy confusa la diferencia entre las funciones Event.stopPropagation y event.preventDefault en el interior de cualquier evento JavaScript. En este breve tutorial vamos a ver las diferencias entre ambas funciones para así saber cuándo debes usar cada una de ellas.

Event.stopPropagation

Vamos a ver primero qué hace el método Event.stopPropagation. Para ello vamos a imaginar que queremos establecer que se realice una determinada tarea cuando haces clic en un elemento del DOM. Por defecto, un evento del DOM se iniciará cuando hagas clic en el elemento, propagándose a todos sus antecesores.

Para frenar la propagación tendrías que usar la función Event.stopPropagation de un evento cualquiera de clase Event, ya que de esta forma el evento se terminará en ese punto, evitando ciertos efectos indeseables. El método Event.stopPropagation se suele usar al final de la función asociada el evento, cuando todo el código se termina de ejecutar, tal y como vemos en este ejemplo:

const boton = document.getElementById('mi-boton');

boton.addEventListener('mousedown', event => {
  // Código que quieres que se ejecute
  event.stopPropagation();
});

Event.preventDefault

Vamos a ver ahora la funcionalidad del método Event.preventDefault, disponible en cualquier evento de clase Event. Comenzaremos diciendo que muchos elementos del DOM incorporan funciones que se ejecutarán de forma predeterminada cuando interactúas con ellos e inicias un evento. Lo que hace el método Event.preventDefault es evitar que se ejecuten estas funciones.

Vamos a poner el ejemplo de un enlace al que quieres asociar un evento mediante una función. Imagínate que en esta función abres una página mediante JavaScript. Pues bien, en este caso, querrás eliminar el comportamiento que tienen los enlaces HTML por defecto. Para ello, basta con que ejecutes el método Event.preventDefault en el interior del código del evento asociado. Aquí tienes un ejemplo:

const enlace = document.getElementById('mi-enlace');

enlace.addEventListener('click', event => {
  // Código que quieres que se ejecute
  event.preventDefault();
});

Lo mismo podría aplicarse al caso de un botón submit que por defecto envía un formulario de tipo form.

Cuando llamas a la función Event.preventDefault() podrás personalizar cualquier acción que se ejecute por defecto. Por ejemplo, cuando envías un formulario, podrías generar una llamada a la API de tu aplicación mediante una petición fetch en lugar de que se abra la página de destino del formulario, al igual que ocurre con un enlace. Si asocias la acción a un elemento pero éste está en el interior de un enlace, recuerda que también tendrías que usar el método Event.stopImmediatePropagation() para evitar que se ejecute el clic en el mismo.

jQuery: return false

En jQuery puedes llamar a estas dos funciones a la vez estés creando el código de la acción asociada a un evento. Para ello basta con que ejecutes las sentencia return false al final del código de la acción que quieres asociar. De este modo se ejecutarán automáticamente tanto el método Event.stopPropagation() como el método Event.preventDefault().

Sin embargo, debes tener en cuenta que en JavaScript, cuando no usas jQuery, el uso de return false es inútil y lo único que ocurrirá es que finalizará la función que se está ejecutando, pero no hará que se ejecuten ni el método Event.stopPropagation(), ni el método Event.preventDefault().

Y esto ha sido todo.

---