JQuery: Diferencias entre ‘return false’ y ‘e.preventDefault()’

jquery1Estimados desarrolladores, amantes de jQuery, ¿cuál es la diferencia funcional entre estos dos fragmentos de código?

$("a").click(function() {
   // Acciones
   return false;
}
$("a").click(function(e) {
   // Acciones
   e.preventDefault();
}

Debo reconocer que hasta el día de ayer usaba ambas opciones de manera indistinta para evitar la acción por defecto del evento en cuestión (en este caso evitar que al hacer click al hipervínculo el navegador vaya a la dirección especificada en el href correspondiente), pero gracias al tip de Chris puedo decir que hoy conozco la diferencia.

Al ejecutarse return false, no sólo se evita la acción por defecto del evento, si no que también evita la propagación en el DOM, lo que se conoce como “bubbling up“. En términos prácticos, para que ambos fragmentos de código sean funcionalmente iguales, quedarían así:

$("a").click(function() {
   // Acciones
   return false;
}
$("a").click(function(e) {
   // Acciones
   e.preventDefault();
   e.stopPropagation();
}

Pequeño detalle, pero muy importante para tomarlo en cuenta al momento de programar con jQuery.

Fuentes:

http://gespadas.com/return-false-preventdefault

http://css-tricks.com/return-false-and-prevent-default/

http://www.etnassoft.com/2011/04/19/jquery-el-mal-uso-de-return-false/

un demo:

http://jsfiddle.net/Gonzalo/Bq3jT/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s