Det kom meget kort op i den sidste video: hvordan forhindrer du browseren i at hoppe ned, når du klikker på et hashlink? Det er standard browseradfærd, og heldigvis kan vi med JavaScript fortælle browseren ikke at gøre det.
Den mest ligefremme måde at håndtere det på er sådan:
$("a").on("click", function(event) ( event.preventDefault(); ));Du vil se, at disse links ikke hopper ned, som du måske tror, det ville:
Se pennen a5aeaa4890837ac172605983324d5470 af Chris Coyier (@chriscoyier) på CodePen
Vær dog forsigtig med det selvfølgelig. Det forhindrer et hash-link i at hoppe ned på siden, men det stopper også et normalt link i at gå til en ny URL. Så brug det kun på ankerlink, som du ved, du udelukkende vil håndtere i dit eget JavaScript. Du kunne indsnævre ting som $("a(href^='#')"). f.eks. "Href-attributten for linket starter med en hash."
Men ofte vil du også se dette:
$("a").on("click", function() ( return false; ));Og det opnår det samme. Hvad der sker her er, at det return false;faktisk laver to ting. Det gør det, event.preventDefault();og det gør en anden ting:event.stopPropagation();
Du kan bruge return false; hvis du vil, skal du bare forstå, hvad stopPropagation er, og være OK med at gøre det. Jeg finder normalt, at det er bedst ikke at stoppe Propagation, medmindre du ved, at du specifikt vil gøre det. Hvad det gør er at stoppe "boblen" af DOM-begivenheden. For eksempel hvis du er DOM er sådan:
- Home
- About
- Clients
- Contact Us
Derefter klikker du helt til højre på ordet "Hjem", den klikhændelse udløses på ankerlinket, så bobler det op til listeelementet, så bobler op til den ikke-ordnede liste, derefter nav-elementet, helt op til selve dokumentet.
Når du stopper forplantning, uanset hvilken begivenhed du kører den, stopper boblen der. Bare vær opmærksom!
Jeg skrev mere om denne forskel her.
Mod slutningen af videoen taler jeg om at forhindre at rulle på et element ved at forhindre standard. Jeg havde bare helt forkert, at du kunne gøre det. Det sker bare sådan, at det er en begivenhed, at du ikke kan stoppe sådan. Der er måder at forhindre det som at bruge CSS ( overflow: hidden;- hvilket kan være underligt) - eller blive temmelig fancy.