V poslednom videu sa to objavilo veľmi stručne: ako zabránite skákaniu prehľadávača, keď kliknete na hash odkaz? Toto je predvolené správanie prehliadača. Našťastie pomocou JavaScriptu môžeme prehliadaču povedať, aby to neurobil.
Najjednoduchší spôsob riešenia je tento:
$("a").on("click", function(event) ( event.preventDefault(); ));Uvidíte, že tieto odkazy neskáču dole, ako by ste si mysleli:
Pozrite si pero a5aeaa4890837ac172605983324d5470 od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Samozrejme, buďte s tým opatrní. Tým sa zabráni tomu, aby hashový odkaz preskočil po stránke, ale taktiež sa zastaví normálny odkaz na prechod na novú adresu URL. Používajte ho teda iba na ukotvovacie odkazy, o ktorých viete, že ich chcete spracovať výlučne vo svojom vlastnom skripte JavaScript. Dalo by sa zúžiť veci ako $("a(href^='#')"). napr. „Atribút href odkazu začína hashom.“
Často to však uvidíte tiež:
$("a").on("click", function() ( return false; ));A tým sa dosiahne to isté. To, čo sa tu deje, je to, že return false;vlastne robí dve veci. Robí to event.preventDefault();a robí ďalšiu vec:event.stopPropagation();
Môžete použiť return false; ak chcete, stačí pochopiť, čo je stopPropagation, a byť v poriadku, keď to robí. Zvyčajne považujem za najlepšie neprestávať s propagáciou, pokiaľ neviete, že to konkrétne chcete urobiť. To, čo robí, je zastavenie „bublania“ udalosti DOM. Napríklad, ak ste DOM, je taký:
- Home
- About
- Clients
- Contact Us
Potom kliknete priamo na slovo „Domov“, táto udalosť kliknutia sa spustí na ukotvenom odkaze, tá potom prebubláva až k položke zoznamu, potom preblokuje k neusporiadanému zoznamu, potom nav úplne hore k samotnému dokumentu.
Keď urobíte stopPropagation, pri akejkoľvek udalosti elementu, na ktorej to spustíte, sa tam prebublávanie zastaví. Len pozor!
Viac som o tomto rozdiele napísal tu.
Ku koncu videa hovorím o zabránení rolovania na prvku preventDefault. Len som sa úplne mýlil, že ste to mohli urobiť. Stáva sa, že je to jedna udalosť, ktorú nemôžete zastaviť tak. Existujú spôsoby, ako tomu zabrániť, napríklad používaním CSS ( overflow: hidden;- čo by mohlo byť čudné) - alebo vytváraním pekných fantázií.