#08: preventDefault, stopPropagation y return false | Programar Plus

← Vídeo anterior Vídeo siguiente →

Apareció muy brevemente en el último video: ¿cómo evita que el navegador salte hacia abajo cuando hace clic en un enlace hash? Ese es el comportamiento predeterminado del navegador y, afortunadamente, con JavaScript, podemos decirle al navegador que no lo haga.

La forma más sencilla de manejarlo es así:

$("a").on("click", function(event) {
  
  event.preventDefault();

});

Verá que estos enlaces no saltan hacia abajo como podría pensar que lo harían:

Vea el Pen a5aeaa4890837ac172605983324d5470 de Chris Coyier (@chriscoyier) en CodePen

Eso sí, ten cuidado con eso, por supuesto. Eso evitará que un enlace hash salte hacia abajo en la página, pero también evitará que un enlace normal vaya a una nueva URL. Por lo tanto, úselo solo en enlaces de anclaje que sepa que desea manejar exclusivamente en su propio JavaScript. Podrías reducir las cosas como $("a[href^="https://css-tricks.com/lodge/learn-jquery/08-preventdefault-stoppropagation-return-false/#"]"). por ejemplo, “El atributo href del enlace comienza con un hash”.

Pero a menudo verás esto también:

$("a").on("click", function() {
  
  return false;

});

Y eso logra lo mismo. Lo que está pasando aquí es que el return false; en realidad está haciendo dos cosas. esta haciendo el event.preventDefault(); y está haciendo otra cosa: event.stopPropagation();

Puedes usar return false; si lo desea, solo necesita comprender qué es stopPropagation y estar de acuerdo con que lo haga. Por lo general, creo que es mejor no detener la propagación a menos que sepa que desea hacerlo específicamente. Lo que hace es detener el “burbujeo” del evento DOM. Por ejemplo, si eres DOM es así:

<nav role="navigation">
  <ul>
    <li><a href="https://css-tricks.com/lodge/learn-jquery/08-preventdefault-stoppropagation-return-false/#">Home</a></li>
    <li><a href="https://css-tricks.com/lodge/learn-jquery/08-preventdefault-stoppropagation-return-false/#">About</a></li>
    <li><a href="https://css-tricks.com/lodge/learn-jquery/08-preventdefault-stoppropagation-return-false/#">Clients</a></li>
    <li><a href="https://css-tricks.com/lodge/learn-jquery/08-preventdefault-stoppropagation-return-false/#">Contact Us</a></li>
  </ul>
</nav>

Luego, hace clic directamente a la derecha en la palabra “Inicio”, ese evento de clic se activará en el enlace de anclaje, luego subirá hasta el elemento de la lista, luego subirá hasta la lista desordenada, luego el elemento de navegación, todo el camino hacia arriba al propio documento.

Cuando detenga la propagación, en el evento de cualquier elemento en el que lo ejecute, el burbujeo se detendrá allí. ¡Solo sé consciente!

Escribí más sobre esta diferencia aquí.

Hacia el final del video, hablo sobre prevenir el desplazamiento en un elemento mediante preventDefault. Estaba totalmente equivocado en que pudieras hacer eso. Da la casualidad de que es un evento que no puedes detener así. Hay formas de evitarlo, como usar CSS (overflow: hidden; – lo que puede ser raro) – o ponerse bastante elegante.

(Visited 9 times, 1 visits today)