Se tuli esiin hyvin lyhyesti viimeisessä videossa: miten estät selaimen hyppäämästä alas, kun napsautat hash-linkkiä? Se on selaimen oletuskäyttäytyminen, ja onneksi voimme JavaScriptillä käyttää selainta olemaan tekemättä sitä.
Selkein tapa käsitellä sitä on seuraava:
$("a").on("click", function(event) ( event.preventDefault(); ));Näet, että nämä linkit eivät hyppää alaspäin, kuten luulisi voivasi:
Katso kynä a5aeaa4890837ac172605983324d5470 kirjoittanut Chris Coyier (@chriscoyier) CodePenistä
Ole tietysti varovainen sen suhteen. Se estää hash-linkin siirtymästä alaspäin sivulta, mutta se myös estää normaalin linkin siirtymisen uuteen URL-osoitteeseen. Joten käytä sitä vain ankkurilinkeissä, joiden tiedät haluavan käsitellä yksinomaan omassa JavaScriptissasi. Voisit kaventaa asioita alas $("a(href^='#')"). esim. "Linkin href-attribuutti alkaa hashilla."
Mutta usein näet myös tämän:
$("a").on("click", function() ( return false; ));Ja se saa aikaan saman asian. Tässä tapahtuu, että return false;se itse asiassa tekee kahta asiaa. Se tekee event.preventDefault();ja tekee toisen asian:event.stopPropagation();
Voit käyttää return false; jos haluat, sinun tarvitsee vain ymmärtää mikä StopPropagation on ja olla kunnossa sen tekemisessä. Mielestäni on parasta olla lopettamatta lisääntymistä, ellet tiedä, että haluat nimenomaan tehdä sen. Se lopettaa DOM-tapahtuman "kuplimisen". Esimerkiksi, jos olet DOM, on tällainen:
- Home
- About
- Clients
- Contact Us
Napsautat sitten suorassa sanassa "Koti" napsauttamalla sitä. Napsautustapahtuma laukaisee ankkurilinkin, sitten se kuplitaan luettelokohteeseen, sitten kuplittuu järjestämättömään luetteloon, sitten nav-elementtiin, kokonaan ylöspäin. itse asiakirjaan.
Kun teet stopPropagation-toiminnon, minkä tahansa elementin tapahtumassa suoritat sen, kupliminen loppuu siihen. Ole vain tietoinen!
Kirjoitin lisää tästä erosta täällä.
Videon loppupuolella puhun elementin vierityksen estämisestä preventDefaultin avulla. Olin aivan väärässä, että voit tehdä sen. Tapahtuu, että se on yksi tapahtuma, jota et voi lopettaa näin. On olemassa tapoja estää se, kuten CSS: n käyttö ( overflow: hidden;mikä saattaa olla outoa) - tai saada melko fancy.