Cancelar la acción por defecto en JavaScript

A veces es necesario cancelar la acción por defecto de una etiqueta usando JavaScript. Por ejemplo, cancelar la navegación al hacer clic en un enlace. Generalmente esto se requiere cuando usamos ese enlace simplemente para ejecutar algún código. En este caso, que al hacer clic en el enlace se produzca la navegación, no es algo que deseemos.

La cancelación de la acción por defecto se realiza utilizando el objeto Event. Para ello, tiene un método especial preventDefault(), que debe ser llamado en cualquier lugar del manejador de eventos.

Probemos en la práctica. Supongamos que tenemos el siguiente enlace:

html<a href="/" id="elem">enlace</a>

Hagamos que al hacer clic en el enlace no se produzca la navegación a otra página:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('¡No puedes navegar por este enlace!');
});