Tas ļoti īsi parādījās pēdējā videoklipā: kā apturēt pārlūkprogrammas lēcienu uz leju, noklikšķinot uz hash saites? Tā ir noklusējuma pārlūka darbība, un par laimi, izmantojot JavaScript, mēs varam pateikt pārlūkam to nedarīt.
Vienkāršākais veids, kā rīkoties, ir šāds:
$("a").on("click", function(event) ( event.preventDefault(); ));Jūs redzēsiet, ka šīs saites nelec uz leju, kā jūs domājat:
Skatiet Krāsu Koijera (@chriscoyier) pildspalvu a5aeaa4890837ac172605983324d5470 vietnē CodePen
Protams, esiet uzmanīgs ar to. Tas apturēs hash saites lēcienu lejup pa lapu, bet tas arī apturēs parastas saites novirzīšanu uz jaunu URL. Tāpēc izmantojiet to tikai enkura saitēm, kuras jūs zināt, ka vēlaties izmantot tikai savā JavaScript. Jūs varētu sašaurināt lietas līdzīgi $("a(href^='#')"). piem., “saites href atribūts sākas ar hash.”
Bet bieži to redzēsiet arī jūs:
$("a").on("click", function() ( return false; ));Un tas paveic to pašu. Šeit notiek tas, ka return false;faktiski dara divas lietas. Tas dara event.preventDefault();un dara citu lietu:event.stopPropagation();
Jūs varat izmantot return false; ja jums patīk, jums vienkārši jāsaprot, kas ir stopPropagation, un jābūt labi, to darot. Es uzskatu, ka parasti vislabāk nav pārtraukt pavairošanu, ja vien jūs nezināt, ka īpaši vēlaties to darīt. Tas tiek apturēts DOM pasākuma “burbuļošanā”. Piemēram, ja jūs esat DOM, tas ir šāds:
- Home
- About
- Clients
- Contact Us
Pēc tam jūs tieši noklikšķiniet uz vārda “Mājas”, tas klikšķa notikums tiks aktivizēts enkura saitē, pēc tam tas burbulīs līdz saraksta vienumam, pēc tam - līdz nesakārtotajam sarakstam, pēc tam navigācijas elementam līdz galam. pašam dokumentam.
Kad jūs pārtraucat stopPropagation, jebkura elementa pasākumā, kurā jūs to darbināt, burbuļošana apstāsies. Tikai jāapzinās!
Vairāk par šo atšķirību rakstīju šeit.
Videoklipa beigās es runāju par elementa ritināšanas novēršanu, izmantojot preventDefault. Es vienkārši kļūdījos, ka jūs to varat izdarīt. Tas notiek tā, ka tas ir viens notikums, kuru jūs nevarat apstāties. Ir veidi, kā to novērst, piemēram, izmantojot CSS ( overflow: hidden;- kas varētu būt dīvaini) - vai iegūt diezgan iedomātu.