Labai trumpai tai pasirodė paskutiniame vaizdo įraše: kaip sustabdyti naršyklės šokinėjimą žemyn, spustelėjus maišos nuorodą? Tai yra numatytasis naršyklės elgesys, ir, laimei, naudodami „JavaScript“ galime nurodyti naršyklei to nedaryti.
Paprasčiausias būdas tai tvarkyti yra toks:
$("a").on("click", function(event) ( event.preventDefault(); ));Pamatysite, kad šios nuorodos nešoka žemyn, kaip jūs manote:
Žiūrėkite Chris Coyier (@chriscoyier) rašiklį a5aeaa4890837ac172605983324d5470 „CodePen“
Nors, žinoma, būkite atsargūs. Tai sustabdys maišos nuorodos šokinėjimą žemyn, bet taip pat sustabdys įprastą nuorodą nuo naujo URL. Taigi naudokite jį tik tais inkaro saitais, kuriuos žinote, kad norite naudoti tik savo „JavaScript“. Galite susiaurinti dalykus kaip $("a(href^='#')"). pvz., „Nuorodos href atributas prasideda maiša.“
Bet dažnai tai pamatysite ir jūs:
$("a").on("click", function() ( return false; ));Ir tai pasiekia tą patį. Čia vyksta tai, kad return false;ji iš tikrųjų daro du dalykus. Tai daro event.preventDefault();ir daro kitą dalyką:event.stopPropagation();
Galite naudoti return false; jei jums patinka, jūs tiesiog turite suprasti, kas yra „StopPropagation“, ir būti gerai, kai tai darote. Manau, kad geriausia nesustoti dauginti, nebent žinote, kad būtent tai norite padaryti. Tai sustabdo „burbuliavimą“ DOM renginyje. Pavyzdžiui, jei esate DOM yra toks:
- Home
- About
- Clients
- Contact Us
Tada spustelėsite tiesiai ant žodžio „Namai“, tas paspaudimo įvykis suaktyvins inkaro nuorodą, tada jis sukurs burbuliukus iki sąrašo elemento, tada - iki nesutvarkyto sąrašo, tada naršymo elemento iki galo prie paties dokumento.
Kai atliksite stopPropagation, bet kurio elemento įvykyje, kurį paleidžiate, burbuliavimas sustos. Tiesiog žinok!
Apie šį skirtumą rašiau daugiau čia.
Vaizdo įrašo pabaigoje kalbu apie tai, kad neleidžiant slinkti elemento, naudojant „preventDefault“. Aš tiesiog buvau visiškai neteisus, kad tu galėjai tai padaryti. Taip atsitinka, kad vienas įvykis negali taip sustoti. Yra tam būdų, kaip to išvengti, pavyzdžiui, naudojant CSS ( overflow: hidden;- kas gali būti keista) - ar gana įmantri.
