# 08: preventDefault, stopPropagation ja vale - CSS-trikid

Anonim

See kerkis viimases videos väga lühidalt: kuidas peatada brauseri räsilingil klõpsates allapoole hüppamine? See on brauseri vaikekäitumine ja õnneks võime JavaScripti abil brauserile öelda, et ärge seda tehke.

Kõige lihtsam viis selle käsitsemiseks on järgmine:

$("a").on("click", function(event) ( event.preventDefault(); ));

Näete, et need lingid ei hüppa alla, nagu võite arvata, et oleks:

Vaadake Chris Coyieri (@chriscoyier) pliiatsit a5aeaa4890837ac172605983324d5470 CodePenis

Loomulikult olge sellega ettevaatlik. See peatab räsilingi hüppamise lehel, kuid see peatab ka tavalise lingi uuele URL-ile minemise. Nii et kasutage seda ainult ankrulinkidel, mida teate, et soovite ainult oma JavaScripti abil käsitseda. Sa võiksid asju kitsendada nagu $("a(href^='#')"). nt "Lingi atribuut href algab räsi abil."

Kuid sageli näete ka seda:

$("a").on("click", function() ( return false; ));

Ja sellega saavutatakse sama asi. Mis siin toimub, on see, et ta return false;teeb tegelikult kahte asja. Ta teeb event.preventDefault();ja teeb teist asja:event.stopPropagation();

Võite kasutada return false; kui soovite, peate lihtsalt mõistma, mis on stopPropagation, ja olge sellega nõus. Ma leian, et tavaliselt on kõige parem paljundamist mitte peatada, kui te ei tea, et soovite seda teha. See peatab DOM-i sündmuse "mullitamise". Näiteks kui olete DOM, on selline:


  • Home
  • About
  • Clients
  • Contact Us

Seejärel klõpsate sõna „Kodu” otsekohe paremal, see klõpsamise sündmus käivitub ankurlingil, seejärel mullitatakse loendiüksuseni, seejärel järjestamata loendini, seejärel navi elemendini, ülesse dokumendi enda juurde.

Kui teete stopPropagationi, peatub mullitamine selle mis tahes elemendi sündmusel. Ole lihtsalt teadlik!

Kirjutasin sellest erinevusest lähemalt siin.

Video lõpu poole räägin elemendi kerimise takistamisest preventDefault abil. Ma eksisin lihtsalt täiesti valesti, et saate seda teha. See juhtub, et see on üks sündmus, mida te ei saa niimoodi peatada. Selle vältimiseks on viise, näiteks CSS-i kasutamine ( overflow: hidden;- mis võib olla kummaline) - või päris uhke saamine.