Erro de Navegação por Link em JavaScript

Vamos analisar um erro relacionado a uma navegação inesperada por link. Suponhamos, por exemplo, o seguinte link:

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

Vamos obter nosso link em uma variável:

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

Vamos associar um manipulador de clique ao nosso link:

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

E é aqui que nos deparamos com uma surpresa. O código está escrito corretamente, no entanto, a saída não aparece no console. O fato é que ao clicar, ocorre uma navegação pelo link. Como nada está especificado no atributo href, o link simplesmente leva para a página atual.

Isso significa que clicar no link leva a um recarregamento da página. Ou seja, nossos dados são exibidos no console, depois a página é recarregada, e o console fica vazio.

Se observarmos com atenção, é possível ver que no momento do clique os dados aparecem no console por um instante, e depois desaparecem. Esta é a característica típica deste erro.

Vamos ver como podemos resolver este problema.

Solução um

No href do link, é necessário colocar uma cerquilha (#). Isso fará com que o link aponte para um local específico da página atual e, ao clicar no link, não haverá recarregamento. Vamos fazer isso:

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

Solução dois

Uma maneira mais avançada é cancelar a ação padrão usando o método preventDefault:

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