Cela est venu très brièvement dans la dernière vidéo: comment empêcher le navigateur de sauter lorsque vous cliquez sur un lien de hachage? C'est le comportement par défaut du navigateur et, heureusement, avec JavaScript, nous pouvons dire au navigateur de ne pas le faire.
La façon la plus simple de gérer cela est la suivante:
$("a").on("click", function(event) ( event.preventDefault(); ));Vous verrez que ces liens ne sautent pas comme vous pourriez le penser:
Voir le Pen a5aeaa4890837ac172605983324d5470 par Chris Coyier (@chriscoyier) sur CodePen
Soyez prudent avec cela bien sûr. Cela empêchera un lien de hachage de sauter sur la page, mais cela empêchera également un lien normal d'accéder à une nouvelle URL. Utilisez-le donc uniquement sur des liens d'ancrage que vous savez que vous souhaitez gérer exclusivement dans votre propre JavaScript. Vous pourriez restreindre les choses comme $("a(href^='#')"). par exemple "L'attribut href du lien commence par un hachage."
Mais souvent, vous verrez aussi ceci:
$("a").on("click", function() ( return false; ));Et cela accomplit la même chose. Ce qui se passe ici, c'est que le return false;fait en fait deux choses. Il fait le event.preventDefault();et il fait autre chose:event.stopPropagation();
Vous pouvez utiliser return false; si vous le souhaitez, il vous suffit de comprendre ce qu'est stopPropagation et d'être d'accord avec cela. Je trouve généralement qu'il vaut mieux ne pas arrêter la Propagation à moins que vous ne sachiez que vous voulez spécifiquement le faire. Ce qu'il fait, c'est arrêter le «bouillonnement» de l'événement DOM. Par exemple, si vous êtes DOM, c'est comme ça:
- Home
- About
- Clients
- Contact Us
Ensuite, vous cliquez carrément à droite sur le mot «Accueil», cet événement de clic se déclenchera sur le lien d'ancrage, puis il remontera jusqu'à l'élément de liste, puis remontera jusqu'à la liste non ordonnée, puis l'élément nav, tout en haut au document lui-même.
Lorsque vous faites stopPropagation, quel que soit l'événement de l'élément sur lequel vous l'exécutez, le bouillonnement s'arrêtera là. Soyez juste conscient!
J'ai écrit plus sur cette différence ici.
Vers la fin de la vidéo, je parle d'empêcher le défilement sur un élément par preventDefault. J'avais complètement tort de pouvoir faire ça. Il se trouve que c'est un événement que vous ne pouvez pas arrêter comme ça. Il existe des moyens de l'empêcher, comme utiliser CSS ( overflow: hidden;- ce qui peut être étrange) - ou devenir assez sophistiqué.