Annulation du comportement par défaut en JavaScript

Parfois, avec JavaScript, il est nécessaire d'annuler le comportement par défaut d'une balise. Par exemple, annuler la navigation vers une URL lors d'un clic sur un lien. Généralement, cela est requis lorsque nous utilisons ce lien simplement pour exécuter du code. Dans ce cas, le fait qu'un clic sur le lien déclenche une navigation n'est pas du tout souhaité.

L'annulation du comportement par défaut s'effectue grâce à l'objet Event. Pour cela, il dispose d'une méthode spéciale preventDefault(), qu'il faut appeler à n'importe quel endroit du gestionnaire d'événement.

Essayons en pratique. Supposons que nous ayons le lien suivant :

<a href="/" id="elem">lien</a>

Faisons en sorte qu'un clic sur le lien ne provoque pas de navigation vers une autre page :

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

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('Vous ne pouvez pas suivre ce lien !');
});

Des liens sont donnés. Faites en sorte qu'au clic sur un lien, son href soit ajouté à la fin de son texte, et que la navigation ne se produise pas.

Deux champs de saisie, un paragraphe et un lien sont donnés. Supposons que des nombres soient saisis dans les champs. Faites en sorte qu'au clic sur le lien, la somme des nombres saisis soit inscrite dans le paragraphe.