Oletustoiminnon peruuttaminen JavaScriptissä

Joskus JavaScriptin avulla on tarpeen peruuttaa tagin oletustoiminto. Esimerkiksi napsautettaessa linkkiä, siirtyminen linkin mukana peruutetaan. Yleensä tätä tarvitaan silloin, kun käytämme tätä linkkiä vain koodin suorittamiseen. Tässä tapauksessa sitä, että linkkiin napsautettaessa siirtymistä tapahtuu, emme halua ollenkaan.

Oletustoiminnon peruuttaminen tehdään Event-olion avulla. Sillä on erityinen menetelmä preventDefault(), jota tulisi kutsua missä tahansa tapahtuman käsittelijässä.

Kokeillaan käytännössä. Oletetaan, että meillä on tällainen linkki:

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

Tehdään niin, että linkkiä napsautettaessa ei siirrytä toiselle sivulle:

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

elem.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Et voi siirtyä tämän linkin mukana!');
});