È emerso molto brevemente nell'ultimo video: come impedisci al browser di saltare giù quando fai clic su un link hash? Questo è il comportamento del browser predefinito e fortunatamente, con JavaScript, possiamo dire al browser di non farlo.
Il modo più semplice per gestirlo è questo:
$("a").on("click", function(event) ( event.preventDefault(); ));Vedrai che questi link non saltano giù come potresti pensare:
Guarda la penna a5aeaa4890837ac172605983324d5470 di Chris Coyier (@chriscoyier) su CodePen
Stai attento con quello, ovviamente. Ciò impedirà a un link hash di saltare giù nella pagina, ma impedirà anche a un normale link di andare a un nuovo URL. Quindi usalo solo sui link di ancoraggio che sai di voler gestire esclusivamente nel tuo JavaScript. Potresti restringere le cose come $("a(href^='#')"). ad es. "L'attributo href del collegamento inizia con un hash."
Ma spesso vedrai anche questo:
$("a").on("click", function() ( return false; ));E questo fa la stessa cosa. Quello che sta succedendo qui è che in return false;realtà sta facendo due cose. Sta facendo event.preventDefault();e sta facendo un'altra cosa:event.stopPropagation();
Puoi usare return false; se vuoi, devi solo capire cos'è stopPropagation e accettare che lo faccia. Trovo che di solito sia meglio non fermare Propagation a meno che tu non sappia che lo vuoi specificamente. Quello che fa è fermare il "ribollire" dell'evento DOM. Ad esempio, se sei DOM è così:
- Home
- About
- Clients
- Contact Us
Quindi fai clic esattamente a destra sulla parola "Home", quell'evento clic si attiverà sul collegamento di ancoraggio, quindi verrà visualizzato fino all'elemento dell'elenco, quindi verrà visualizzato l'elenco non ordinato, quindi l'elemento nav, tutto in alto al documento stesso.
Quando interrompi la propagazione, su qualsiasi evento dell'elemento su cui lo esegui, il bubbling si fermerà lì. Basta essere consapevoli!
Ho scritto di più su questa differenza qui.
Verso la fine del video parlo di impedire lo scorrimento su un elemento tramite preventDefault. Mi sbagliavo completamente sul fatto che tu potessi farlo. Accade così che sia un evento che non puoi fermare in quel modo. Ci sono modi per prevenirlo come usare CSS ( overflow: hidden;- che potrebbe essere strano) - o diventare piuttosto fantasiosi.