event.preventDefault() vs return false: Cómo no romper tu JavaScript

Introducción: ¿Por qué este tema explota Stack Overflow?

Si alguna vez has escrito en JavaScript un manejador de clic en un enlace o el envío de un formulario, seguro te has encontrado con la situación en la que el navegador hace algo por sí mismo, ignorando tu lógica. Escribes alert('¡Hola!') al hacer clic en un enlace, y el navegador, en lugar de eso, insiste en ir a otra página. ¿Te suena?

Aquí es donde entran en escena dos métodos legendarios: event.preventDefault() y return false. La pregunta "¿Cuál elegir?" es una de las más populares en Stack Overflow con decenas de miles de visitas. Y no es para menos: la diferencia entre ellos es crítica, y una elección incorrecta puede llevar a errores difíciles de detectar.

En este artículo, de una vez por todas, entenderemos:

\n
• Qué es la "acción por defecto" en el navegador
\n
• Cómo funcionan ambos métodos
\n
• La principal diferencia que ha roto el código a miles de desarrolladores
\n
• Cuándo usar cada uno de ellos
\n
• Por qué return false no siempre es malo
\n

¿Listos? ¡Allá vamos!

1. ¿Qué es la "acción por defecto"?

Antes de hablar de los métodos, entendamos qué estamos cancelando. El navegador es una máquina inteligente con un comportamiento incorporado para muchos elementos HTML:

\n
• Enlace (<a>): por defecto, navega a la dirección del atributo href.
\n
• Formulario (<form>): por defecto, envía los datos al servidor y recarga la página.
\n
• Botón de envío (<input type="submit">): envía el formulario.
\n
• Menú contextual (clic derecho): muestra el menú del navegador.
\n

A veces necesitamos este comportamiento, por ejemplo, cuando el usuario realmente quiere navegar a un enlace. Pero a menudo queremos interceptar esta acción y ejecutar nuestra propia lógica: validar un formulario antes de enviarlo, abrir un enlace en una ventana modal, mostrar un menú contextual personalizado.

Para eso precisamente sirven nuestros protagonistas.

2. event.preventDefault() — el método caballeroso

Este es un método del objeto evento (event). Hace exactamente una cosa: cancela la acción por defecto del navegador.

// Ejemplo 1: Cancelar la navegación de un enlace\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('¡El enlace no funcionó! Lo cancelé.');\n});\n\n// Ejemplo 2: Cancelar el envío de un formulario\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // Ahora el formulario no recargará la página\n    // Se puede hacer una petición AJAX o validación\n    console.log('El formulario no se envió. Verificando datos...');\n});\n

Observa: preventDefault() no detiene la propagación del evento. Si tienes manejadores anidados, el evento continuará "propagándose" hacia arriba en el árbol DOM.

Esto es importante de entender: si quieres tanto cancelar la acción como detener la propagación, necesitas llamar a ambos métodos: preventDefault() y stopPropagation().

3. return false — un amigo viejo pero peligroso

Ahora bien, return false es una bestia más compleja. Todo depende de cómo exactamente agregues el manejador.

Caso 1: Atributos HTML (onclick)

En tiempos antiguos (y todavía en código viejo) los manejadores se colocaban directamente en el HTML:

<a href="https://example.com" onclick="return false;">Haz clic en mí</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="Enviar">\n</form>\n\n<script>\nfunction validateForm() {\n    // Si devuelve false — el formulario no se enviará\n    // Si devuelve true — se enviará\n    return false;\n}\n</script>\n

En