A apărut foarte scurt în ultimul videoclip: cum opriți browserul să nu sară atunci când faceți clic pe un link hash? Acesta este comportamentul implicit al browserului și, din fericire, cu JavaScript, putem spune browserului să nu facă asta.
Cea mai simplă modalitate de a o gestiona este astfel:
$("a").on("click", function(event) ( event.preventDefault(); ));Veți vedea că aceste legături nu sar în jos așa cum ați putea crede că ar face:
Vedeți stiloul Pen a5aeaa4890837ac172605983324d5470 de Chris Coyier (@chriscoyier) pe CodePen
Fii atent cu asta, desigur, desigur. Acest lucru va opri un link hash să sară pe pagină, dar va opri, de asemenea, un link normal de la accesarea unei adrese URL noi. Așadar, utilizați-l numai pe linkuri de ancorare pe care știți că doriți să le gestionați exclusiv în propriul dvs. JavaScript. Ai putea restrânge lucrurile jos ca $("a(href^='#')"). De exemplu, „Atributul href al linkului începe cu un hash”.
Dar de multe ori vei vedea și asta:
$("a").on("click", function() ( return false; ));Și asta realizează același lucru. Ceea ce se întâmplă aici este că de return false;fapt face două lucruri. Face event.preventDefault();și face un alt lucru:event.stopPropagation();
Puteți utiliza return false; dacă doriți, trebuie doar să înțelegeți ce este stopPropagation și să fiți în regulă cu asta. De obicei, consider că este mai bine să nu oprești propagarea decât dacă știi că vrei să faci asta în mod specific. Ceea ce face este să oprească „balonarea” evenimentului DOM. De exemplu, dacă ești DOM este așa:
- Home
- About
- Clients
- Contact Us
Apoi faceți clic dreapta pe cuvântul „Acasă”, acel eveniment de clic se va declanșa pe link-ul de ancorare, apoi va ajunge la elementul listei, apoi va apărea la lista neordonată, apoi la elementul nav, până la capăt la documentul în sine.
Când opriți Propagarea, la orice eveniment al elementului pe care îl executați, clocotul se va opri acolo. Fiți conștienți!
Am scris mai multe despre această diferență aici.
Spre sfârșitul videoclipului vorbesc despre prevenirea derulării pe un element prin preventDefault. M-am înșelat total că poți face asta. Se întâmplă că este un eveniment pe care nu îl poți opri așa. Există modalități de prevenire, cum ar fi utilizarea CSS ( overflow: hidden;- care ar putea fi ciudat) - sau a deveni destul de elegant.