Det kom upp mycket kort i den senaste videon: hur hindrar du webbläsaren från att hoppa ner när du klickar på en hashlänk? Det är standardwebbläsarens beteende, och lyckligtvis, med JavaScript, kan vi be webbläsaren att inte göra det.
Det enklaste sättet att hantera det är så här:
$("a").on("click", function(event) ( event.preventDefault(); ));Du ser att dessa länkar inte hoppar ner som du kanske tror att det skulle:
Se pennan a5aeaa4890837ac172605983324d5470 av Chris Coyier (@chriscoyier) på CodePen
Var dock försiktig med det självklart. Det kommer att hindra en hash-länk från att hoppa ner på sidan, men det kommer också att hindra en normal länk från att gå till en ny URL. Så använd det bara på ankarlänkar som du vet att du uteslutande vill hantera i ditt eget JavaScript. Du kan begränsa saker som $("a(href^='#')"). t.ex. "länkets href-attribut börjar med en hash."
Men ofta ser du det här också:
$("a").on("click", function() ( return false; ));Och det åstadkommer samma sak. Vad som händer här är att det return false;faktiskt gör två saker. Det gör det event.preventDefault();och det gör en annan sak:event.stopPropagation();
Du kan använda return false; om du vill behöver du bara förstå vad stoppPropagation är och vara OK med att det gör det. Jag tycker vanligtvis att det är bäst att inte stoppa Propagation om du inte vet att du specifikt vill göra det. Vad det gör är att stoppa DOM-händelsens "bubblande". Till exempel om du är DOM är så här:
- Home
- About
- Clients
- Contact Us
Sedan klickar du helt rätt på ordet "Hem", den klickhändelsen utlöses på ankarlänken, sedan bubblar den upp till listobjektet, sedan bubblar upp till den oordnade listan, sedan navelementet, hela vägen till själva dokumentet.
När du stoppar Propagation, oavsett elementets händelse du kör den på, kommer bubblingen att sluta där. Var bara medveten!
Jag skrev mer om denna skillnad här.
Mot slutet av videon pratar jag om att förhindra rullning på ett element genom preventDefault. Jag hade helt fel att du kunde göra det. Det händer bara så att det är en händelse som du inte kan sluta så. Det finns sätt att förhindra det som att använda CSS ( overflow: hidden;- vilket kan vara konstigt) - eller bli ganska snygg.