Σφάλμα μετάβασης μέσω συνδέσμου στο JavaScript

Ας αναλύσουμε ένα σφάλμα που σχετίζεται με απροσδόκητη μετάβαση μέσω συνδέσμου. Ας υποθέσουμε για παράδειγμα τον ακόλουθο σύνδεσμο:

<a href="">link</a>

Ας πάρουμε τον σύνδεσμο μας σε μια μεταβλητή:

let link = document.querySelector('a');

Ας προσαρτήσουμε έναν χειριστή κλικ στον σύνδεσμο μας:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Και εδώ μας περιμένει μια έκπληξη. Ο κώδικας είναι γραμμένος σωστά, ωστόσο, η έξοδος στην κονσόλα δεν εμφανίζεται. Το γεγονός είναι ότι κατά το κλικ συμβαίνει μετάβαση μέσω του συνδέσμου. Εφόσον στο χαρακτηριστικό href τίποτα δεν έχει οριστεί, τότε ο σύνδεσμος απλά οδηγεί στην τρέχουσα σελίδα.

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

Εάν κοιτάξουμε προσεκτικά, τότε μπορούμε να δούμε πως τη στιγμή του κλικ τα δεδομένα εμφανίζονται στην κονσόλα για μια στιγμή, και μετά εξαφανίζονται. Αυτό είναι το χαρακτηριστικό σημάδι αυτού του σφάλματος.

Ας δούμε πώς μπορούμε να λύσουμε αυτό το πρόβλημα.

Πρώτη λύση

Στο href του συνδέσμου πρέπει να βάλουμε το σύμβολο #. Αυτό θα οδηγήσει στο ότι ο σύνδεσμος θα δείχνει σε ένα συγκεκριμένο σημείο της τρέχουσας σελίδας και κατά το κλικ στον σύνδεσμο δεν θα γίνεται επαναφόρτωση. Ας το κάνουμε:

<a href="#">link</a>

Δεύτερη λύση

Ένας πιο προηγμένος τρόπος είναι η ακύρωση της προεπιλεγμένης ενέργειας χρησιμοποιώντας τη μέθοδο preventDefault:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});