Surgiu muito brevemente no último vídeo: como você impede o navegador de pular quando você clica em um link hash? Esse é o comportamento padrão do navegador e, felizmente, com JavaScript, podemos dizer ao navegador para não fazer isso.
A maneira mais direta de lidar com isso é assim:
$("a").on("click", function(event) ( event.preventDefault(); ));Você verá que esses links não saltam para baixo como você imagina:
Veja a caneta a5aeaa4890837ac172605983324d5470 de Chris Coyier (@chriscoyier) no CodePen
Tenha cuidado com isso, é claro. Isso impedirá que um link hash salte para baixo na página, mas também impedirá que um link normal vá para um novo URL. Portanto, use-o apenas em links âncora que você sabe que deseja manipular exclusivamente em seu próprio JavaScript. Você pode restringir as coisas como $("a(href^='#')"). por exemplo, “O atributo href do link começa com um hash.”
Mas muitas vezes você também verá isso:
$("a").on("click", function() ( return false; ));E isso realiza a mesma coisa. O que está acontecendo aqui é que o return false;está realmente fazendo duas coisas. Ele está fazendo o event.preventDefault();e está fazendo outra coisa:event.stopPropagation();
Você pode usar return false; se quiser, você só precisa entender o que é stopPropagation e estar ok com isso. Acho que geralmente é melhor não interromper a propagação, a menos que você saiba que deseja fazer isso especificamente. O que isso faz é parar o “borbulhar” do evento DOM. Por exemplo, se você é DOM é assim:
- Home
- About
- Clients
- Contact Us
Em seguida, você clica diretamente na palavra "Home", esse evento de clique será acionado no link de âncora, em seguida, aparecerá no item da lista e, em seguida, na lista não ordenada, depois no elemento nav, em todo o caminho para o próprio documento.
Quando você faz stopPropagation, em qualquer evento do elemento em que você o executa, o borbulhamento para por aí. Apenas fique atento!
Escrevi mais sobre essa diferença aqui.
Perto do final do vídeo, falo sobre como evitar a rolagem em um elemento por preventDefault. Eu estava totalmente errado que você pudesse fazer isso. Acontece que é um evento que você não pode parar assim. Existem maneiras de evitá-lo, como usar CSS ( overflow: hidden;- o que pode ser estranho) - ou ficar bem complicado.