Ακύρωση της προεπιλεγμένης ενέργειας στο JavaScript

Μερικές φορές απαιτείται να ακυρωθεί η προεπιλεγμένη ενέργεια μιας ετικέτας χρησιμοποιώντας JavaScript. Για παράδειγμα, να ακυρωθεί η μεταβίβαση μέσω ενός συνδέσμου όταν γίνεται κλικ πάνω του. Συνήθως αυτό απαιτείται στην περίπτωση που χρησιμοποιούμε αυτόν τον σύνδεσμο απλώς για την εκτέλεση κάποιου κώδικα. Σε αυτή την περίπτωση, το γεγονός ότι κατά το κλικ στον σύνδεσμο θα πραγματοποιηθεί μεταβίβαση, δεν μας χρειάζεται καθόλου.

Η ακύρωση της προεπιλεγμένης ενέργειας πραγματοποιείται χρησιμοποιώντας το αντικείμενο Event. Για αυτό υπάρχει μια ειδική μέθοδος preventDefault(), η οποία πρέπει να κληθεί σε οποιοδήποτε σημείο του χειριστή συμβάντος.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε τον ακόλουθο σύνδεσμο:

<a href="/" id="elem">σύνδεσμος</a>

Ας κάνουμε έτσι ώστε κατά το κλικ στον σύνδεσμο να μην πραγματοποιείται μεταβίβαση σε άλλη σελίδα:

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

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('Δεν μπορείτε να μεταβείτε μέσω αυτού του συνδέσμου!');
});

Δίνονται σύνδεσμοι. Κάντε έτσι ώστε κατά το κλικ σε έναν σύνδεσμο, στο τέλος του να εγγράφεται το href του, και να μην πραγματοποιείται μεταβίβαση μέσω του συνδέσμου.

Δίνονται δύο πεδία εισαγωγής, μια παράγραφος και ένας σύνδεσμος. Ας υποθέσουμε ότι στους πεδία εισαγωγής εισάγονται αριθμοί. Κάντε έτσι ώστε κατά το κλικ στον σύνδεσμο, στην παράγραφο να εγγράφεται το άθροισμα των εισαγμένων αριθμών.