Annullare l'azione predefinita in JavaScript

A volte con JavaScript è necessario annullare l'azione predefinita di un tag. Ad esempio, cliccando su un link per annullare la navigazione verso quel link. Di solito questo è necessario quando utilizziamo questo link semplicemente per eseguire del codice. In questo caso il fatto che cliccando sul link avvenga la navigazione verso di esso, non è affatto ciò di cui abbiamo bisogno.

L'annullamento dell'azione predefinita viene effettuato utilizzando l'oggetto Event. Per questo esiste un metodo speciale preventDefault(), che dovrebbe essere chiamato in qualsiasi punto del gestore eventi.

Proviamo nella pratica. Supponiamo di avere questo link:

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

Facciamo in modo che cliccando sul link non avvenga il passaggio a un'altra pagina:

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

elem.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Non puoi navigare su questo link!');
});