V zadnjem videoposnetku je prišlo zelo na kratko: kako ustaviti brskalnik, da ne bi skočil navzdol, ko kliknete povezavo zgoščevanja? To je privzeto vedenje brskalnika in na srečo lahko z JavaScriptom brskalniku povemo, naj tega ne počne.
Najbolj enostaven način za reševanje je tak:
$("a").on("click", function(event) ( event.preventDefault(); ));Videli boste, da te povezave ne skočijo navzdol, kot bi morda mislili, da bi:
Oglejte si pisalo a5aeaa4890837ac172605983324d5470 Chrisa Coyierja (@chriscoyier) na CodePen
Seveda bodite pri tem previdni. To bo preprečilo, da bi zgoščevalna povezava skočila po strani, prav tako pa tudi običajna povezava do novega URL-ja. Zato ga uporabljajte samo na sidrnih povezavah, za katere veste, da jih želite izključno obdelovati v svojem JavaScript. Lahko bi stvari zožili kot $("a(href^='#')"). npr. "Atribut href povezave se začne s zgoščeno kodo."
Pogosto pa boste videli tudi to:
$("a").on("click", function() ( return false; ));In s tem se doseže isto. Tu se dogaja, da return false;dejansko počne dve stvari. Dela event.preventDefault();in počne še eno stvar:event.stopPropagation();
Lahko uporabite return false; če želite, morate samo razumeti, kaj je stopPropagation, in biti v redu s tem početjem. Običajno se mi zdi najbolje, da ne ustavite razmnoževanja, razen če veste, da to izrecno želite storiti. Kar naredi, je ustaviti "mehurčke" dogodka DOM. Na primer, če ste DOM, je tak:
- Home
- About
- Clients
- Contact Us
Nato kliknete naravnost na besedo »Domov«, ta dogodek klika se bo sprožil na sidrni povezavi, nato se bo povzpel do elementa seznama, nato do neurejenega seznama, nato nav element, navzgor navzgor do samega dokumenta.
Ko ustavite Razmnoževanje, se bo ob katerem koli dogodku elementa, ki ga zaženete, mehurček tam ustavil. Samo zavedajte se!
Več o tej razliki sem napisal tukaj.
Proti koncu videoposnetka govorim o preprečevanju drsenja po elementu z preprečitvijoDefault. Preprosto sem se motil, da si to lahko storil. Tako se zgodi, da je to en dogodek, ki ga ne moreš tako ustaviti. Obstajajo načini, kako to preprečiti, na primer z uporabo CSS ( overflow: hidden;- kar je lahko čudno) - ali pa, da postanete precej modni.