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

Estimados 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

The difference between ‘return false;’ and ‘e.preventDefault();’

jQuery: el mal uso de return false

un demo:

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