Εμφανίστηκε πολύ σύντομα στο τελευταίο βίντεο: πώς σταματάτε το πρόγραμμα περιήγησης να μην πέσει κάτω όταν κάνετε κλικ σε έναν σύνδεσμο κατακερματισμού; Αυτή είναι η προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης, και ευτυχώς, με το JavaScript, μπορούμε να πούμε στο πρόγραμμα περιήγησης να μην το κάνει.
Ο πιο απλός τρόπος αντιμετώπισης είναι ο εξής:
$("a").on("click", function(event) ( event.preventDefault(); ));Θα δείτε ότι αυτοί οι σύνδεσμοι δεν πέφτουν κάτω, όπως νομίζετε ότι θα:
Δείτε το στυλό a5aeaa4890837ac172605983324d5470 του Chris Coyier (@chriscoyier) στο CodePen
Φροντίστε να είστε προσεκτικοί με αυτό. Αυτό θα σταματήσει να αποκλείει έναν σύνδεσμο κατακερματισμού από τη σελίδα, αλλά θα σταματήσει επίσης μια κανονική σύνδεση από τη μετάβαση σε μια νέα διεύθυνση URL. Επομένως, χρησιμοποιήστε το μόνο σε συνδέσμους αγκύρωσης που γνωρίζετε ότι θέλετε να χειριστείτε αποκλειστικά στο δικό σας JavaScript Θα μπορούσατε να περιορίσετε τα πράγματα όπως $("a(href^='#')"). π.χ. "Το χαρακτηριστικό href του συνδέσμου ξεκινά με κατακερματισμό."
Αλλά συχνά θα το βλέπετε και αυτό:
$("a").on("click", function() ( return false; ));Και αυτό επιτυγχάνει το ίδιο πράγμα. Αυτό που συμβαίνει εδώ είναι ότι return false;κάνει στην πραγματικότητα δύο πράγματα. Κάνει event.preventDefault();και κάνει ένα άλλο πράγμα:event.stopPropagation();
Μπορείτε να χρησιμοποιήσετε την επιστροφή false; αν θέλετε, απλά πρέπει να καταλάβετε τι είναι το stopPropagation και να είστε εντάξει με αυτό. Βρίσκω συνήθως ότι είναι καλύτερο να μην σταματήσετε το Propagation εκτός εάν γνωρίζετε ότι θέλετε συγκεκριμένα να το κάνετε αυτό. Αυτό που κάνει είναι να σταματήσει η «φούσκα» της εκδήλωσης DOM. Για παράδειγμα, αν είστε DOM είναι έτσι:
- Home
- About
- Clients
- Contact Us
Στη συνέχεια, κάνετε κλικ ακριβώς στη λέξη "Αρχική σελίδα", ότι το συμβάν κλικ θα ενεργοποιηθεί στον σύνδεσμο αγκύρωσης, στη συνέχεια θα φουσκώσει μέχρι το στοιχείο της λίστας, στη συνέχεια θα φουσκώσει μέχρι τη λίστα χωρίς ταξινόμηση, στη συνέχεια το στοιχείο πλοήγησης, σε όλη τη διαδρομή στο ίδιο το έγγραφο.
Όταν κάνετε stopPropagation, σε οποιοδήποτε στοιχείο του γεγονότος το τρέχετε, η ανάδευση θα σταματήσει εκεί. Απλά προσέξτε!
Έγραψα περισσότερα για αυτήν τη διαφορά εδώ.
Προς το τέλος του βίντεο, μιλάω για την αποτροπή της κύλισης σε ένα στοιχείο από την αποτροπή DeDefault. Ήμουν εντελώς λάθος που θα μπορούσατε να το κάνετε αυτό. Απλώς συμβαίνει αυτό είναι ένα γεγονός που δεν μπορείτε να σταματήσετε έτσι. Υπάρχουν τρόποι για να το αποτρέψετε όπως η χρήση CSS ( overflow: hidden;- που μπορεί να είναι περίεργο) - ή να γίνετε αρκετά φανταχτερός.