Error de navegación por enlace en JavaScript

Analicemos un error relacionado con la navegación inesperada por enlace. Supongamos como ejemplo el siguiente enlace:

<a href="">link</a>

Obtengamos nuestro enlace en una variable:

let link = document.querySelector('a');

Asociemos un manejador de clics a nuestro enlace:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Y aquí nos espera una sorpresa. El código está escrito correctamente, sin embargo, la salida en la consola no aparece. El problema es que al hacer clic se produce la navegación por el enlace. Dado que en el atributo href no hay nada especificado, el enlace simplemente dirige a la página actual.

Esto significa que hacer clic en el enlace provoca una recarga de la página. Es decir, nuestros datos se muestran en la consola, luego la página se recarga, y la consola se vacía.

Si observamos con atención, podemos ver cómo en el momento del clic los datos aparecen en la consola por un instante, y luego desaparecen. Esta es la característica distintiva de este error.

Veamos cómo se puede resolver este problema.

Solución uno

En el href del enlace se debe colocar una almohadilla. Esto hará que el enlace apunte a una ubicación específica de la página actual y al hacer clic en el enlace no habrá recarga. Hagamos esto:

<a href="#">link</a>

Solución dos

Una forma más avanzada es cancelar la acción por defecto usando el método preventDefault:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});