Het kwam heel kort naar voren in de laatste video: hoe voorkom je dat de browser naar beneden springt als je op een hash-link klikt? Dat is het standaardgedrag van de browser en gelukkig kunnen we met JavaScript de browser vertellen dat niet te doen.
De meest eenvoudige manier om ermee om te gaan is als volgt:
$("a").on("click", function(event) ( event.preventDefault(); ));Je zult zien dat deze links niet naar beneden springen zoals je zou denken:
Zie de Pen a5aeaa4890837ac172605983324d5470 door Chris Coyier (@chriscoyier) op CodePen
Wees daar natuurlijk voorzichtig mee. Dat zorgt ervoor dat een hash-link niet naar beneden op de pagina springt, maar het voorkomt ook dat een normale link naar een nieuwe URL gaat. Gebruik het dus alleen op ankerlinks waarvan u weet dat u ze uitsluitend in uw eigen JavaScript wilt verwerken. Je zou dingen kunnen verfijnen zoals $("a(href^='#')"). bijv. "Het href-kenmerk van de link begint met een hash."
Maar vaak zie je dit ook:
$("a").on("click", function() ( return false; ));En daarmee wordt hetzelfde bereikt. Wat hier gebeurt, is dat het return false;eigenlijk twee dingen doet. Het doet het event.preventDefault();en het doet iets anders:event.stopPropagation();
U kunt return false gebruiken; als je wilt, moet je gewoon begrijpen wat stopPropagation is en ermee akkoord gaan als je dat doet. Ik vind dat het meestal het beste is om Propagation niet te stoppen, tenzij je weet dat je dat specifiek wilt doen. Wat het doet, is het "borrelen" van het DOM-evenement stoppen. Als uw DOM bijvoorbeeld zo is:
- Home
- About
- Clients
- Contact Us
Dan klik je vierkant rechts op het woord "Home", die klikgebeurtenis wordt geactiveerd op de ankerlink, dan zal het omhoog borrelen naar het lijstitem, dan omhoog bellen naar de ongeordende lijst en dan het nav-element, helemaal naar boven naar het document zelf.
Wanneer je stopPropagation doet, op welk element dan ook waarop je dat uitvoert, zal het bubbelen daar stoppen. Pas op!
Ik schreef hier meer over dit verschil.
Tegen het einde van de video heb ik het over het voorkomen van scrollen op een element door preventDefault. Ik had het gewoon helemaal mis dat je dat kon doen. Toevallig is dat een gebeurtenis die je zo niet kunt stoppen. Er zijn manieren om het te voorkomen, zoals het gebruik van CSS ( overflow: hidden;- wat misschien raar is) - of behoorlijk chique worden.