To se vrlo kratko pojavilo u posljednjem videozapisu: kako zaustaviti preglednik da ne skače prema dolje kad kliknete hash vezu? To je zadano ponašanje preglednika i na sreću, s JavaScriptom možemo reći pregledniku da to ne čini.
Najjednostavniji je način rješavanja ovako:
$("a").on("click", function(event) ( event.preventDefault(); ));Vidjet ćete da ove veze ne skaču prema dolje kao što možda mislite da bi:
Pogledajte Olovku a5aeaa4890837ac172605983324d5470 Chrisa Coyiera (@chriscoyier) na CodePen
Budite oprezni s tim, naravno. To će zaustaviti skakanje hash veze po stranici, ali će zaustaviti i prelazak normalne veze na novi URL. Stoga ga koristite samo na usidrenim vezama za koje znate da isključivo želite rukovati u vlastitom JavaScriptu. Možete suziti stvari poput $("a(href^='#')"). npr. "Href atribut veze započinje s raspršivanjem."
Ali često ćete vidjeti i ovo:
$("a").on("click", function() ( return false; ));I to postiže istu stvar. Ovdje se događa da return false;zapravo radi dvije stvari. Radi event.preventDefault();i čini još jednu stvar:event.stopPropagation();
Možete koristiti return false; ako želite, samo trebate razumjeti što je stopPropagation i biti u redu s time što to radite. Obično smatram da je najbolje ne zaustaviti širenje, osim ako ne znate da to posebno želite učiniti. Ono što čini je zaustaviti "mjehuriće" DOM događaja. Na primjer, ako ste DOM, ovako je:
- Home
- About
- Clients
- Contact Us
Zatim kliknete pravo desno na riječ "Početna", taj će se klik klik aktivirati na sidrenom linku, zatim će se pojaviti oblačić do stavke popisa, zatim oblačić do neuređenog popisa, zatim navigacijski element, skroz gore na sam dokument.
Kad zaustavite propagaciju, na bilo kojem događaju elementa na kojem ga pokrenete, mjehurići će se tu zaustaviti. Samo budite svjesni!
O ovoj razlici sam napisao više ovdje.
Pred kraj videozapisa govorim o sprječavanju pomicanja na elementu prevenDefault. Jednostavno sam bio u krivu što si to mogao učiniti. Slučajno se dogodi da je to jedan događaj koji ne možete tako zaustaviti. Postoje načini da se to spriječi poput upotrebe CSS-a ( overflow: hidden;- što može biti čudno) - ili postajanja prilično fancy.