JScript Katana

¿Qué es “javascript:void(0)”? Guía completa sobre su significado, uso y buenas prácticas

Otras utilidades
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introducción – ¿Qué es “javascript:void(0)”?

Al aprender JavaScript, es posible que te encuentres con la notación “javascript:void(0)” en el código. A primera vista puede resultar difícil de comprender. Sin embargo, es una de las técnicas útiles para controlar el comportamiento de la página y gestionar el manejo de eventos.
Este artículo explica claramente el significado, propósito y uso de “javascript:void(0)”. También aborda precauciones importantes y alternativas modernas.

1-1. Pregunta frecuente: ¿Qué significa “javascript:void(0)”?

“javascript:void(0)” es una notación utilizada para evitar el comportamiento predeterminado de enlaces o botones y, en su lugar, ejecutar JavaScript personalizado.
Normalmente, una etiqueta HTML <a> navega a una página de destino al hacer clic. Pero cuando deseas que el enlace se comporte como un botón sin navegar a ningún lado, “javascript:void(0)” resulta útil.
Ejemplo:

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

Al hacer clic en este enlace no ocurre nada por sí mismo. Puedes adjuntar tu propio manejo de eventos JavaScript en su lugar.

1-2. Desafíos del lector y objetivo del artículo

Al añadir manejo de eventos personalizado a páginas web, existen muchas formas de controlar enlaces y botones. Sin embargo, “javascript:void(0)” puede resultar confuso para principiantes y, si se usa incorrectamente, puede afectar al SEO o a la accesibilidad.
Este artículo cubre los siguientes temas para que puedas entenderlo y usarlo correctamente:

  1. El concepto básico y la implementación de “javascript:void(0)”
  2. Precauciones y desventajas
  3. Alternativas más seguras y modernas

Con este conocimiento, podrás crear aplicaciones web más modernas y eficientes.

2. Concepto básico de “javascript:void(0)”

“javascript:void(0)” es un tipo de expresión JavaScript que se usa principalmente para desactivar el comportamiento predeterminado de enlaces o botones. Esta sección explica cómo funciona el operador void y qué significa realmente “void(0)”.

2-1. Qué significa el operador “void”

En JavaScript, el operador “void” devuelve nada (undefined).
Normalmente, las expresiones JavaScript devuelven un valor, pero “void” fuerza que el resultado sea undefined. Se utiliza principalmente para ignorar el valor de evaluación mientras se realizan efectos secundarios.
Ejemplo básico:

console.log(void(0)); // Output: undefined

Esto confirma que void(0) devuelve undefined.

2-2. Qué representa “void(0)”

“void(0)” representa “no hacer nada”. Evalúa a undefined, evitando la navegación de la página mientras permite tu comportamiento de clic personalizado.
Ejemplo:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

Este enlace no navega, pero dispara una alerta.

2-3. Por qué se usa “javascript:void(0)”

Las razones principales incluyen:

  1. Desactivar la navegación del enlace – Evita la recarga de la página mientras se manejan eventos de clic personalizados.
  2. Usarlo como enlace muerto – Útil como marcador de posición durante el desarrollo.
  3. Simple y fácil de implementar – Sintaxis amigable para principiantes.

3. Ejemplos de uso e implementación

Esta sección explica ejemplos reales de uso de “javascript:void(0)”, desde fragmentos básicos hasta escenarios aplicados.

3-1. Ejemplo de código básico

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

Este enlace no hace nada al hacer clic.

3-2. Personalizando eventos de clic

Ejemplo 1: Mostrar una alerta

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. Ejemplo basado en un escenario

Activar una ventana modal
HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Ventajas y desventajas – ¿Deberías usarlo realmente?

“javascript:void(0)” se usa mucho, pero tiene algunas desventajas. Esta sección explica tanto los beneficios como las precauciones.

4-1. Beneficios

  1. Previene la navegación predeterminada
  2. Sintaxis simple e intuitiva
  3. Útil para enlaces de marcador de posición

4-2. Desventajas

  1. Impacto SEO Los motores de búsqueda no pueden rastrear el contenido del href.
  2. Problemas de accesibilidad Los lectores de pantalla y la navegación con teclado pueden no funcionar correctamente.

4-3. Cuándo usar y cuándo evitar

Casos de uso recomendados:

  • Comportarse como un botón pero implementado como un enlace
  • Enlaces muertos temporales

Evitar cuando:

  • Necesitas enlaces amigables para SEO
  • La accesibilidad es importante

5. Alternativas y mejores prácticas modernas

Aunque “javascript:void(0)” es conveniente, existen enfoques más modernos y seguros.

5-1. Usando event.preventDefault()

Concepto
Este método cancela el comportamiento predeterminado, como la navegación del enlace o el envío de un formulario.

Ejemplo
HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Usando la etiqueta <button>

HTML5 recomienda usar elementos <button> cuando se implementa un comportamiento similar a un botón.
HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Ejemplo accesible y amigable para SEO

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Código de ejemplo por caso de uso

6-1. Creación de un menú de navegación

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Disparador de ventana modal

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Resumen – Uso de “javascript:void(0)” y opciones futuras

7-1. Puntos clave

  1. Concepto básico: Desactivar el comportamiento predeterminado del enlace y ejecutar lógica personalizada.
  2. Precauciones y alternativas: Usar event.preventDefault() o <button> para SEO y accesibilidad.
  3. Ejemplos prácticos: Menús de navegación, disparadores de modales y más.

7-2. Recomendaciones para desarrollo moderno

Aunque “javascript:void(0)” sigue utilizándose, el desarrollo moderno prioriza el SEO y la usabilidad.
Enfoque recomendado:

  • Usa “javascript:void(0)” para prototipos rápidos o proyectos muy pequeños.
  • Usa event.preventDefault() o <button> en entornos de producción.

7-3. Reflexiones finales

Utilizando las técnicas presentadas aquí, implementa código que considere tanto el SEO como la experiencia del usuario.

広告