V posledním videu se to objevilo velmi stručně: jak zastavíte prohlížeč ve skákání dolů, když kliknete na hash odkaz? Toto je výchozí chování prohlížeče a naštěstí s JavaScriptem můžeme prohlížeči říct, aby to nedělal.
Nejpřímější způsob řešení je následující:
$("a").on("click", function(event) ( event.preventDefault(); ));Uvidíte, že tyto odkazy neskákají dolů, jak byste si mohli myslet:
Podívejte se na pero a5aeaa4890837ac172605983324d5470 od Chris Coyier (@chriscoyier) na CodePen
S tím ale samozřejmě buďte opatrní. Tím se zastaví hashový odkaz ve skákání dolů po stránce, ale také se zastaví normální odkaz v přechodu na novou adresu URL. Používejte jej tedy pouze na kotevní odkazy, o kterých víte, že je chcete zpracovat výhradně ve svém vlastním JavaScriptu. Dalo by se zúžit věci jako $("a(href^='#')"). např. „Atribut href odkazu začíná hashem.“
Ale často to uvidíte také:
$("a").on("click", function() ( return false; ));A tím je dosaženo stejné věci. To, co se zde děje, je to, že ve return false;skutečnosti dělá dvě věci. Dělá to event.preventDefault();a dělá další věc:event.stopPropagation();
Můžete použít return false; pokud chcete, stačí pochopit, co je stopPropagation, a být v pořádku, když to dělá. Obvykle považuji za nejlepší nezastavovat Propagaci, pokud nevíte, že to konkrétně chcete udělat. To, co dělá, je zastavení „probublávání“ události DOM. Například pokud jste DOM, je tento:
- Home
- About
- Clients
- Contact Us
Poté kliknete přímo na slovo „Domů“, událost kliknutí se spustí na kotevním odkazu, poté probublává nahoru k položce seznamu, poté vybublinkuje k neuspořádanému seznamu, pak navigační prvek, úplně nahoru k samotnému dokumentu.
Když uděláte stopPropagation, při jakékoli události prvku, kterou spustíte, se bublina zastaví. Jen mějte na paměti!
O tomto rozdílu jsem napsal více zde.
Ke konci videa hovořím o zabránění rolování na prvku preventDefault. Jen jsem se úplně mýlil, že jste to mohli udělat. Stává se, že je to jedna událost, kterou nemůžete zastavit takhle. Existují způsoby, jak tomu zabránit, jako je používání CSS ( overflow: hidden;- což může být divné) - nebo získání pěkného fantazie.