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:
<a href="/" id="elem">linkki</a>
Tehdään niin, että linkkiä napsautettaessa ei siirrytä toiselle sivulle:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function(event) {
event.preventDefault();
console.log('Et voi siirtyä tämän linkin mukana!');
});
Annetut linkit. Tee niin, että linkkiä napsautettaessa sen loppuun kirjoitetaan sen href, eikä linkin mukana siirtymistä tapahdu.
Annettu kaksi input-kenttää, kappale ja linkki. Input-kenttiin annetaan numeroita. Tee niin, että linkkiä napsautettaessa kappaleeseen kirjoitetaan syötettyjen numeroiden summa.
