javascript(0), return false y preventDefault: diferencias y ejemplos

Cuando trabajamos con enlaces y eventos en JavaScript, es habitual encontrarnos con expresiones como javascript:void(0), return false o event.preventDefault(). Aunque pueden utilizarse para evitar determinadas acciones del navegador, no significan exactamente lo mismo.

Entender sus diferencias es importante para saber qué ocurre realmente cuando el usuario hace clic sobre un enlace, pulsa un botón o envía un formulario.

¿Qué significa javascript(0) en href?

La expresión:

<a href="javascript:void(0)">Haz clic aquí</a>

utiliza un JavaScript URL dentro del atributo href.

Cuando el usuario pulsa el enlace, el navegador ejecuta:

void(0)

El operador void evalúa una expresión y devuelve undefined. En este caso, 0 se evalúa, pero el resultado se descarta, por lo que el enlace no provoca una navegación a otra página.

Dicho de una forma sencilla:

void(0)

significa aproximadamente:

Ejecuta esto, pero no devuelvas ningún resultado útil.

Por eso durante muchos años se utilizó:

<a href="javascript:void(0)">Abrir</a>

para crear enlaces que ejecutaban código JavaScript sin navegar a otra dirección.

¿Por qué se utilizaba javascript(0)?

Un ejemplo clásico sería:

<a href="javascript:void(0)" onclick="mostrarMensaje()">
    Mostrar mensaje
</a>

Al hacer clic, se ejecuta:

function mostrarMensaje() {
    alert("Hola");
}

El href contiene javascript:void(0) para evitar que el enlace navegue.

Sin embargo, actualmente este patrón se considera poco recomendable. MDN desaconseja utilizar URLs javascript: y señala que pueden perjudicar la accesibilidad y producir comportamientos inesperados. Cuando el elemento realmente realiza una acción y no navega hacia otra página, normalmente es más apropiado utilizar un <button>.

Por ejemplo, en lugar de:

<a href="javascript:void(0)" onclick="mostrarMensaje()">
    Mostrar mensaje
</a>

podemos utilizar:

<button type="button" id="mostrar">
    Mostrar mensaje
</button>

y JavaScript:

document.getElementById("mostrar").addEventListener("click", mostrarMensaje);

¿Qué hace return false?

return false tiene un comportamiento que puede resultar diferente dependiendo de cómo se utilice.

Un ejemplo tradicional es:

<a href="https://ejemplo.com" onclick="return false">
    No ir a la página
</a>

Al hacer clic, el navegador ejecuta el código del manejador y el resultado es false.

En este contexto, devolver false desde un manejador de eventos inline impide la acción predeterminada del elemento, por lo que el enlace no realiza su navegación.

También podemos encontrar:

<form onsubmit="return validarFormulario()">

con:

function validarFormulario() {
    if (/* datos incorrectos */) {
        return false;
    }

    return true;
}

Si la función devuelve false, se cancela la acción predeterminada del formulario.

Importante: return false no es exactamente lo mismo en todos los contextos

Una de las confusiones más habituales es pensar que escribir:

return false;

siempre equivale a:

event.preventDefault();

No es así.

En los manejadores de eventos tradicionales escritos directamente en HTML, como:

onclick="return false"

devolver false puede cancelar la acción predeterminada.

Sin embargo, cuando utilizamos addEventListener(), simplemente devolver false desde la función no cancela el comportamiento predeterminado:

element.addEventListener("click", function () {
    return false;
});

Para cancelar el comportamiento predeterminado debemos utilizar:

element.addEventListener("click", function (event) {
    event.preventDefault();
});

¿Qué hace preventDefault()?

preventDefault() es el método específico del objeto Event destinado a cancelar la acción predeterminada asociada a un evento cancelable.

Por ejemplo:

<a href="https://ejemplo.com" id="enlace">
    Visitar página
</a>

Podemos impedir la navegación mediante:

document.getElementById("enlace").addEventListener("click", function (event) {
    event.preventDefault();
});

El enlace seguirá generando el evento click, pero el navegador no realizará su acción predeterminada, que en este caso sería navegar hacia la URL indicada en href.

Ejemplo con un formulario

Supongamos que tenemos:

<form id="formulario">
    <input type="text" id="nombre">
    <button type="submit">Enviar</button>
</form>

Normalmente, al enviar el formulario el navegador ejecutará su comportamiento predeterminado.

Podemos impedirlo:

document.getElementById("formulario").addEventListener("submit", function (event) {
    event.preventDefault();

    console.log("El formulario no se ha enviado.");
});

Esto es especialmente útil cuando queremos validar los datos mediante JavaScript o enviar la información utilizando fetch().

MDN utiliza precisamente este mecanismo para mostrar cómo impedir el envío de un formulario cuando los datos introducidos no son válidos.

Diferencia entre return false y preventDefault

Podemos resumir la diferencia principal de esta manera:

Por ejemplo:

element.onclick = function () {
    return false;
};

puede cancelar la acción predeterminada.

Pero:

element.addEventListener("click", function () {
    return false;
});

no tiene ese efecto.

En este último caso debemos utilizar:

element.addEventListener("click", function (event) {
    event.preventDefault();
});

preventDefault() no detiene la propagación

Otro concepto importante es que preventDefault() no detiene el evento.

Por ejemplo:

element.addEventListener("click", function (event) {
    event.preventDefault();
});

cancela la acción predeterminada, pero el evento puede continuar propagándose por el DOM.

Esto es diferente de:

event.stopPropagation();

stopPropagation() sirve para impedir que el evento continúe propagándose hacia otros elementos. MDN señala expresamente que preventDefault() y stopPropagation() tienen funciones diferentes.

Por tanto:

event.preventDefault();

significa:

No realices la acción predeterminada.

Mientras que:

event.stopPropagation();

significa:

No sigas propagando este evento por el DOM.

Incluso pueden utilizarse conjuntamente cuando necesitamos ambos comportamientos:

element.addEventListener("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
});

Ejemplo práctico con un enlace

Tenemos:

<a href="https://ejemplo.com" id="miEnlace">
    Acceder
</a>

Podemos cancelar la navegación:

document.getElementById("miEnlace").addEventListener("click", function (event) {
    event.preventDefault();

    console.log("El enlace ha sido pulsado, pero no se navega.");
});

El usuario puede hacer clic, el evento se produce y nuestro código se ejecuta, pero el navegador no sigue la URL del href.

Además, podemos comprobar si el comportamiento predeterminado ha sido cancelado mediante:

if (event.defaultPrevented) {
    console.log("La acción predeterminada ha sido cancelada.");
}

La propiedad defaultPrevented devuelve true cuando preventDefault() ha cancelado la acción predeterminada.

¿Es recomendable utilizar javascript(0)?

Aunque podemos encontrarlo en mucho código antiguo, actualmente no suele ser la opción recomendada.

Por ejemplo:

<a href="javascript:void(0)" onclick="abrirVentana()">
    Abrir ventana
</a>

puede sustituirse por un botón:

<button type="button" id="abrir">
    Abrir ventana
</button>

Y después:

document.getElementById("abrir").addEventListener("click", abrirVentana);

Esta separación entre HTML y JavaScript resulta más clara y evita utilizar un enlace como si fuera un botón.

Además, un enlace debería utilizarse normalmente para navegar hacia otro recurso, mientras que un botón es apropiado cuando el usuario va a ejecutar una acción. MDN advierte precisamente de los problemas que pueden provocar los enlaces utilizados como botones mediante # o javascript:void(0).

¿Cuándo utilizar cada uno?

En código moderno podemos seguir una regla sencilla.

Si queremos que un elemento navegue:

<a href="/contacto">Contacto</a>

Si necesitamos ejecutar una acción:

<button type="button">Abrir</button>

Si tenemos un evento cuyo comportamiento predeterminado queremos cancelar:

element.addEventListener("click", function (event) {
    event.preventDefault();
});

Si estamos trabajando con código antiguo, podemos encontrarnos con:

onclick="return false"

o:

href="javascript:void(0)"

pero conviene conocer su funcionamiento antes de mantener o modificar ese código.

Ejemplo completo

Veamos un ejemplo que reúne los conceptos anteriores:

<a href="https://ejemplo.com" id="enlace">
    Enlace
</a>

<script>
const enlace = document.getElementById("enlace");

enlace.addEventListener("click", function(event) {
    event.preventDefault();

    console.log("Se ha pulsado el enlace");
    console.log(event.defaultPrevented);
});
</script>

Al hacer clic:

Usuario hace clic
       ↓
Se genera el evento click
       ↓
Se ejecuta el listener
       ↓
event.preventDefault()
       ↓
Se cancela la navegación

El evento no desaparece ni deja de existir. Simplemente se evita la acción predeterminada asociada al clic.

En resumen

javascript:void(0) es una técnica antigua que utiliza una URL de JavaScript y el operador void para ejecutar una expresión cuyo resultado es undefined, evitando así la navegación. Aunque todavía puede encontrarse en páginas antiguas, actualmente existen alternativas más adecuadas.

return false puede cancelar la acción predeterminada cuando se utiliza en determinados manejadores tradicionales, pero su comportamiento no debe confundirse con el de preventDefault().

Por su parte, event.preventDefault()** es la forma explícita y moderna de cancelar la acción predeterminada de un evento cancelable**. Es especialmente útil para enlaces, formularios y otros elementos cuyo comportamiento queremos controlar mediante JavaScript.

La diferencia fundamental puede recordarse así:

javascript:void(0)
→ Ejecuta una expresión que devuelve undefined

return false
→ Puede cancelar la acción predeterminada en ciertos manejadores

event.preventDefault()
→ Cancela explícitamente la acción predeterminada del evento

Conocer esta diferencia ayuda a entender código JavaScript antiguo y, sobre todo, a escribir código moderno utilizando cada elemento para la función que realmente le corresponde.