ES
RU
EN
ZH
FR
DE
PT
AR
HI
# o javascript:void(0): ¿qué elegir para enlaces JavaScript? Explicación completa con código
¡Hola, colega desarrollador! Si alguna vez has escrito enlaces que no llevan a una nueva página, sino que ejecutan código JavaScript (por ejemplo, abren una ventana modal, cargan contenido o realizan una animación), seguramente te has enfrentado al dilema: ¿qué valor del atributo href usar? ¿href="#" o href="javascript:void(0)"?
Esta pregunta es un verdadero éxito en Stack Overflow (¡miles de visitas!), y no es casualidad. Parece un detalle menor, pero de ello depende cómo se comportará la página: si se desplazará hacia arriba, si aparecerá un hash en la URL, si funcionará en navegadores antiguos. Aclaremos de una vez por todas qué enfoque es mejor y por qué la respuesta "correcta" no es tan simple.
El problema: ¿por qué cambiar el href?
Imagina: escribes un botón que abre un menú:
<a href="#" onclick="openMenu(); return false;">Menú</a>O así:
<a href="javascript:void(0)" onclick="openMenu();">Menú</a>Ambas opciones "funcionan", pero cada una esconde sorpresas. Comparemos según criterios clave.
Opción 1: href="#" — clásico con trampa
# es un enlace al "inicio" de la página. Si simplemente escribes <a href="#">, el navegador desplazará la página hacia arriba. Para evitarlo, debes agregar return false; en el manejador:
<a href="#" onclick="doSomething(); return false;">Haz clic</a>Ventajas:
- Accesibilidad: el enlace sigue siendo enfocable (se puede navegar con Tab).
- Semántica: para los lectores de pantalla sigue siendo un enlace (aunque no lleve a ninguna parte).
- Simplicidad: fácil de recordar, se escribe rápido.
Desventajas:
- Desplazamiento hacia arriba: si olvidas
return false, el usuario perderá su posición. - Cambio de URL: se agrega
#en la barra de direcciones (a veces no es deseable). - Historial del navegador: se crea una entrada en el historial (el botón "Atrás" llevará a la página anterior con "#").
Opción 2: href="javascript:void(0)" — truco de antaño
javascript:void(0) es un pseudoprotocolo JavaScript. Le dice al navegador: "ejecuta el código void(0) y no sigas el enlace". void(0) devuelve undefined, por lo que la página no se mueve.
<a href="javascript:void(0)" onclick="doSomething();">Haz clic</a>Ventajas:
- No desplaza la página — no necesita
return false. - No cambia la URL — no se agrega hash.
Desventajas:
- Problemas de accesibilidad: algunos lectores de pantalla antiguos pueden "tropezar" con
javascript:en el href. - Violación de los principios de mejora progresiva: si el usuario tiene JavaScript desactivado, el enlace no funciona (lleva a un vacío).
- ¿HTML no válido? Formalmente,
javascript:es un protocolo no estándar, pero los navegadores lo entienden. Sin embargo, el validador W3C puede quejarse. - Depuración más compleja: si hay un error en el href, el navegador puede comportarse de manera impredecible.
