Det kom veldig kort opp i den siste videoen: hvordan stopper du nettleseren fra å hoppe ned når du klikker på en hash-lenke? Det er standard nettleseratferd, og heldigvis kan vi med JavaScript fortelle nettleseren om ikke å gjøre det.
Den enkleste måten å håndtere det på er slik:
$("a").on("click", function(event) ( event.preventDefault(); ));Du vil se at disse lenkene ikke hopper ned som du kanskje tror det ville:
Se pennen a5aeaa4890837ac172605983324d5470 av Chris Coyier (@chriscoyier) på CodePen
Vær forsiktig med det selvfølgelig. Det vil stoppe en hash-kobling fra å hoppe nedover på siden, men det vil også stoppe en normal link fra å gå til en ny URL. Så bruk den bare på ankerlenker som du vet at du utelukkende vil håndtere i ditt eget JavaScript. Du kan begrense ting som $("a(href^='#')"). f.eks. "Href-attributtet til lenken starter med en hash."
Men ofte ser du dette også:
$("a").on("click", function() ( return false; ));Og det oppnår det samme. Det som skjer her er at det return false;faktisk gjør to ting. Det gjør det event.preventDefault();og det gjør en annen ting:event.stopPropagation();
Du kan bruke return false; hvis du vil, trenger du bare å forstå hva stopPropagation er og være OK med at du gjør det. Jeg synes vanligvis at det er best å ikke stoppe Propagation med mindre du vet at du spesifikt vil gjøre det. Det den gjør er å stoppe "boblingen" av DOM-hendelsen. For eksempel hvis du er DOM er slik:
- Home
- About
- Clients
- Contact Us
Deretter klikker du rett på ordet "Hjem", den klikkhendelsen vil utløses på ankerlenken, så vil den boble opp til listeelementet, så boble opp til den uordnede listen, deretter nav-elementet, helt opp til selve dokumentet.
Når du stopper Propagation, uansett hvilken begivenhet du kjører på, vil boblingen stoppe der. Bare vær oppmerksom!
Jeg skrev mer om denne forskjellen her.
Mot slutten av videoen snakker jeg om å forhindre å rulle på et element ved å forhindre standard. Jeg tok helt feil at du kunne gjøre det. Det er bare slik at det er en hendelse at du ikke kan stoppe slik. Det er måter å forhindre det som å bruke CSS ( overflow: hidden;- som kan være rart) - eller bli ganske fancy.