¿Qué es y cómo usar preventDefault()?

event.preventDefault() es un método clave de JavaScript para controlar el comportamiento por defecto del navegador. En este artículo vas a ver para qué sirve, cómo funciona y cómo usarlo correctamente en el DOM. A través de ejemplos prácticos, aprenderás a evitar acciones automáticas como envíos de formularios o navegación de enlaces.

1. ¿Qué es preventDefault() en JavaScript?

Primero debemos entender: ¿Qué es el «Comportamiento por defecto»?

Los navegadores web son inteligentes y traen acciones preprogramadas para ciertos elementos del HTML. Cuando interactúas con ellos, el navegador ya sabe qué hacer sin que tú escribas una sola línea de código.

Ejemplos clásicos:

1. En un formulario (<form>):
   • Al hacer clic en un botón de «Enviar», el comportamiento por defecto es enviar los datos a una URL y recargar la página.
2. En un enlace (<a>):
   • Al hacer clic, el comportamiento por defecto es navegar hacia la dirección del atributo href.
3. En un checkbox:
   • Al hacer clic, el comportamiento es marcar o desmarcar la casilla.

Ahora si: ¿QUÉ ES Y PARA QUR SIRVE event.preventDefault()?

Es un método (una función) que vive dentro del objeto de evento. Su único trabajo es decirle al navegador: «¡Hey! Sé que sabes qué hacer normalmente, pero esta vez no lo hagas. Yo me encargo de manejarlo con mi propio código JavaScript«.

Características importantes de preventDefault():

El objeto event

Siempre debe recibirse como parámetro en la función manejadora. Podés llamarlo event, e o evt, y desde él se controla el comportamiento del evento.

¿Dónde ponerlo?

Generalmente se coloca al inicio de la función, para asegurar que la acción nativa del navegador se cancele antes de que ocurra cualquier otra lógica.

No detiene el código

preventDefault() no funciona como un return. El código JavaScript continúa ejecutándose con normalidad; solo se bloquea la acción por defecto del navegador (como enviar un formulario o seguir un enlace).

2. ¿Cómo usar preventDefault()?

Primero debemos conocer su sintaxis

2.1. Sintaxis preventDefault()

La sintaxis es muy sencilla, pero tiene una regla de oro: debe usarse dentro de una función que maneje un evento.

objetoEvento.preventDefault();Lenguaje del código: CSS (css)

Explicación de las partes:

1. objetoEvento:
   • Es el nombre del parámetro que recibe tu función. Aunque puedes llamarlo como quieras (como e o evt), representa el evento que acaba de ocurrir (un clic, un envío de formulario, etc.).
2. .preventDefault():
   • Es el método que le dice al navegador: «Anula la acción automática asociada a este evento».
3. Sin parámetros:
   • Este método no recibe nada dentro de los paréntesis.

2.2. Ejemplo práctico: Detener un enlace

Imagina que tienes un botón que parece un enlace (<a>), pero en lugar de llevarte a otra página, solo quieres que cambie el color del fondo.

HTML (enlace):

<a id="miLink" href="https://google.com">Haz clic aquí</a>Lenguaje del código: HTML, XML (xml)

JAVASCRIPT

const link = document.querySelector('#miLink');

link.addEventListener('click', function(event) {
    // 1. Detenemos la navegación a Google
    event.preventDefault(); 
    
    // 2. Ejecutamos nuestra propia lógica
    document.body.style.backgroundColor = "lightblue";
    console.log("Navegación cancelada. El fondo ahora es azul.");
});Lenguaje del código: JavaScript (javascript)

Explicación: Vamos a desglosar qué pasó línea por línea para que entiendas el flujo:

1. Selección del elemento:
   • Con document.querySelector('#miLink') buscamos el enlace en el HTML y lo guardamos en una constante.
2. Escucha del evento (el método addEventListener):
   • Le decimos al navegador que se quede «escuchando» hasta que alguien haga un 'click' en ese enlace.
3. El parámetro event:
   • Cuando haces clic, JavaScript crea automáticamente un objeto evento con toda la información del clic (dónde se hizo, qué tecla se presionó, etc.) y lo pasa como primer argumento a nuestra función. Nosotros lo llamamos event.
4. La llamada mágica:
   • Al escribir event.preventDefault(), JavaScript busca en las propiedades internas de ese evento y marca una «bandera» (flag) llamada cancelable como verdadera. El navegador, antes de redirigirte a la URL del href, revisa esa bandera. Al ver que la activamos, cancela la redirección.
5. Código personalizado:
   • Una vez que la acción por defecto está «muerta», el código sigue bajando y ejecuta el cambio de color de fondo.

NOTA!!!: preventDefault() no detiene la ejecución de tu función. Si pones código después de event.preventDefault(), ese código se ejecutará. Lo único que se detiene es lo que el navegador iba a hacer por su cuenta.

3. ¿Cuál es la diferencia real entre event.preventDefault() y event.stopPropagation()?

Para entender la diferencia, imagina que un evento es como una noticia que viaja por un edificio:

• preventDefault(): Cancela el efecto de la noticia (ej: «No hagas lo que dice la circular»).
• stopPropagation(): Evita que la noticia suba al siguiente piso (ej: «No le cuentes esto a mi jefe»).

3.1. Cuadro comparativo

Característica	event.preventDefault()	event.stopPropagation()
¿Qué detiene?	La acción automática del navegador.	El viaje del evento hacia los padres (Burbujeo).
¿Afecta al DOM?	No, el evento sigue subiendo por los padres.	Sí, corta la cadena de eventos hacia arriba.
Caso común	Validar un formulario o links.	Evitar que un clic en un botón active un clic en un contenedor.

3.2. Ejemplo de event.stopPropagation() (Burbujeo)

Por defecto, en el DOM, si haces clic en un botón que está dentro de un div, el clic «burbujea«: primero lo recibe el botón y luego su padre (el div).

// HTML: <div id="padre"><button id="hijo">Haz clic</button></div>

const padre = document.querySelector('#padre');
const hijo = document.querySelector('#hijo');

padre.addEventListener('click', () => {
    alert("¡Soy el DIV PADRE y también recibí el clic!");
});

hijo.addEventListener('click', (event) => {
    event.stopPropagation(); // <--- EL TRUCO ESTÁ AQUÍ
    alert("¡Soy el BOTÓN HIJO y detuve el chisme!");
});Lenguaje del código: JavaScript (javascript)

Explicación: * Sin stopPropagation(), verías dos alertas (la del hijo y luego la del padre).

• Con stopPropagation(), la «noticia» del clic se queda en el hijo. El padre nunca se entera de que hubo un clic, por lo tanto, su función no se ejecuta.

3.3. ¿Cuándo usar cada uno?

1. Usa preventDefault() cuando:
   • Quieras que un elemento se comporte de forma distinta a la original (ej: que un formulario no recargue la página, que un clic derecho no abra el menú del navegador).
2. Usa stopPropagation() cuando:
   • Tengas elementos anidados (como un botón dentro de una tarjeta/card) y quieras que al tocar el botón no se dispare también la acción de la tarjeta.

3.4. ¿Se pueden usar juntos?

¡Sí! Perfectamente. Si tienes un link dentro de un menú desplegable y quieres que no navegue Y que tampoco cierre el menú (porque el menú se cierra al detectar clics en sus padres), usarías ambos:

event.preventDefault();  // No navegues
event.stopPropagation(); // No le avises al menú que hice clicLenguaje del código: JavaScript (javascript)

¿Ves la diferencia ahora? Uno mata la acción y el otro corta la comunicación.

4. ¿Cuáles son los comportamiento por defecto más comunes del navegador?