Standaardactie annuleren in JavaScript
Soms is het nodig om met JavaScript de standaardactie van een tag te annuleren. Bijvoorbeeld, het annuleren van het volgen van een link bij het erop klikken. Dit is over het algemeen nodig in het geval dat we de link simpelweg gebruiken om wat code uit te voeren. In dat geval is het feit dat er op de link wordt geklikt en er een navigatie plaatsvindt, helemaal niet wat we willen.
Het annuleren van de standaardactie wordt gedaan
met het object Event. Hiervoor
heeft het een speciale methode preventDefault(),
die moet worden aangeroepen in de event handler.
Laten we het in de praktijk proberen. Stel we hebben de volgende link:
<a href="/" id="elem">link</a>
Laten we ervoor zorgen dat wanneer op de link wordt geklikt, er geen navigatie naar een andere pagina plaatsvindt:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function(event) {
event.preventDefault();
console.log('U kunt deze link niet volgen!');
});
Er zijn links gegeven. Zorg ervoor dat bij het klikken op een link de href waarde aan het einde ervan wordt toegevoegd, en er geen navigatie plaatsvindt.
Er zijn twee input velden, een paragraaf en een link gegeven. Laat in de input velden nummers worden ingevoerd. Zorg ervoor dat bij het klikken op de link de som van de ingevoerde nummers in de paragraaf wordt geplaatst.