Σφάλμα Απαγόρευσης Μετάβασης Συνδέσμου σε JavaScript

Ας υποθέσουμε ότι έχουμε έναν σύνδεσμο:

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

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

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

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

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

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

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

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // σφάλμα σύνταξης
	event.preventDefault();
});

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

Φυσικά, δεν θα προλάβουμε να διαβάσουμε το κείμενο του σφάλματος, κάτι που δυσκολεύει σημαντικά την εύρεσή του. Ωστόσο, υπάρχει ένα έξυπνο τέχνασμα. Πρέπει να βάλουμε ένα δίεση στο href του συνδέσμου. Σε αυτή την περίπτωση δεν θα συμβεί μετάβαση μέσω του συνδέσμου και θα δούμε το σφάλμα που εμφανίστηκε στην κονσόλα:

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