Az utolsó videóban nagyon röviden felmerült: hogyan akadályozhatja meg a böngésző leugrását, ha rákattint egy hash linkre? Ez a böngésző alapértelmezett viselkedése, és szerencsére a JavaScript használatával elmondhatjuk a böngészőnek, hogy ezt ne tegye.
A kezelés legegyszerűbb módja a következő:
$("a").on("click", function(event) ( event.preventDefault(); ));Látni fogja, hogy ezek a linkek nem ugranak lefelé, mint gondolná:
Lásd: Chris Coyier (@chriscoyier) toll a5aeaa4890837ac172605983324d5470 a CodePen-en
Természetesen vigyázzon ezzel. Ez megakadályozza, hogy a hash-link az oldalra ugorjon, de megakadályozza, hogy egy normál link új URL-re kerüljön. Tehát csak olyan horgony linkeken használja, amelyekről tudja, hogy kizárólag a saját JavaScript-jében szeretné kezelni. Szűkítheti a dolgokat, mint például $("a(href^='#')"). pl. "A link href attribútuma hash-szal kezdődik."
De gyakran ezt is látni fogja:
$("a").on("click", function() ( return false; ));És ezzel ugyanazt érjük el. Ami itt történik, az az, hogy return false;valójában két dolgot csinál. Ez egy event.preventDefault();másik dolgot tesz:event.stopPropagation();
Használhatja a return false értéket; ha úgy tetszik, csak meg kell értenie, mi a stopPropagation, és ezzel rendben kell lennie. Úgy gondolom, hogy a legjobb, ha nem hagyja abba a szaporítást, hacsak nem tudja, hogy kifejezetten ezt szeretné megtenni. Ami megakadályozza a DOM esemény „pezsgését”. Például, ha Ön DOM, ilyen:
- Home
- About
- Clients
- Contact Us
Ezután kattintson közvetlenül a „Home” szóra, és ez a kattintási esemény elindul a horgony linken, majd felpattan a listaelemig, majd a rendezetlen listáig, majd a navigációs elemig, egészen felfelé. magához a dokumentumhoz.
Amikor a stopPropagation-t végrehajtja, bármely elem eseményén futtatja azt, akkor a pezsgés itt megáll. Csak légy tisztában!
Itt többet írtam erről a különbségről.
A videó vége felé beszélek arról, hogy megakadályozzam egy elem görgetését a preventDefault segítségével. Teljesen tévedtem, hogy ezt megteheti. Történetesen ez az egyik esemény, amelyet nem lehet így megállni. Van néhány módja annak megakadályozására, mint például a CSS használata ( overflow: hidden;- ami furcsa lehet), vagy elég divatos.