16

Revisando algunos códigos de JavaScript, me encuentro con una peculiaridad, en algunas ocasiones se utiliza preventDefault() pero en otras un return false;, por ejemplo:

Función con return false;:

function() {
  return false;
}

Función con preventDefault();:

function(e) {
    e.preventDefault();
}

Un ejemplo más puntual sería el siguiente:

$('a').click(function () {
    return false;
});
//----------------------------
$('a').click(function (e) {
    e.preventDefault();
});

Actualización

La respuesta de Álvaro me ha aclarado algunas dudas y me ha generado otras, por ejemplo, menciona:

En jQuery, return false es equivalente a hacer preventDefault y stopPropagation

Lo cual con sus ejemplos es bastante entendible, pero continuando con mi investigación, veo dos eventos más que funcionan con fines parecidos, el primero es stopPropagation y el otro es stopImmediatePropagation. stopPropagation hasta ahora lo he comprendido, pero ¿qué hay acerca de del stopImmediatePropagation?

Los ejemplos que hasta ahora han respondido me han ayudado demasiado a entender su funcionamiento, sin embargo, ahora no me queda claro en qué momento es factible usar stopImmediatePropagation.

Por ejemplo, enfocándonos en jQuery, ¿cuál sería el resultado de ejecutar el siguiente código?

$('a').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
});

Dado lo anterior me surgen algunas dudas:

  1. ¿Cuál es la diferencia entre usar preventDefault() y return false;? (Duda resuelta)
  2. ¿En qué momento utilizar uno o el otro? (Duda resuelta)
  3. ¿Es preferible inclinarse por alguno de los dos mencionados? (Duda resuelta)
  4. ¿Para qué es el stopImmediatePropagation y qué ventajas tendría al usarlo?
  5. ¿Qué diferencia existe al usar stopPropagation contra stopImmediatePropagation o utilizarlas en conjunto?
3
  • Actualicé mi respuesta para responder a la edición que hiciste, pero esas nuevas dudas deberían haber ido en una nueva pregunta y no cambiar la pregunta existente para añadir nuevos casos.
    – Alvaro Montoro
    Commented el 11 feb. 2017 a las 3:30
  • @AlvaroMontoro ok, es bueno que lo menciones, simplemente asumí que las podría poner como una extensión de la pregunta ya que va relacionado. Muchas gracias por tu respuesta, la analizaré :)
    – Phi
    Commented el 11 feb. 2017 a las 3:35
  • Comprendo. Deja un comentario si quieres que explique algo mejor o si no se entiende bien lo que he puesto... es un poco tarde y ya no sé ni lo que escribo
    – Alvaro Montoro
    Commented el 11 feb. 2017 a las 3:46

3 respuestas 3

17
+50

¿Cuál es la diferencia entre usar preventDefault() y return false;?

Algunas diferencias:

  • Funcionalidad: preventDefault, como su nombre indica, previene la acción por defecto asociada a ese evento; mientras que return false devuelve el valor falso (algo que en algunas ocasiones podría prevenir la acción por defecto, pero que no es su objetivo principal).
  • Ámbito: preventDefault es un método de evento, es decir es una función dentro de un objeto y no funciona sin su evento (no puedes hacer preventDefault() sin más, tiene que ser evento.preventDefault()); Mientras que return es una sentencia que devuelve un valor y que puede ser llamada en cualquier momento.
  • Posicionamiento: dentro de un controlador de evento preventDefault se puede llamar a preventDefault en cualquier momento, mientras que return false sólo se puede hacer al final. Esto puede parecer trivial, pero puede tener diferentes resultados si hay algún error en JS en mitad del controlador de evento.

Aunque pueden funcionar de manera similar en algunos casos, no siempre es así. Por ejemplo: en JavaScript puro, si tienes un enlace con a y haces preventDefault(), la página no se redireccionará porque se evita la acción por defecto. Mientras que si haces return false sí que se realiza la redirección.

document.querySelector("#enlace1").addEventListener("click", function(e) {
  e.preventDefault();
});

document.querySelector("#enlace2").addEventListener("click", function(e) {
  return false;
});
<a href="http://es.stackoverflow.com" id="enlace1">Yo no redirecciono</a>...
<a href="http://es.stackoverflow.com" id="enlace2">pero yo sí</a>

Pero no siempre es así: si usas return false en el onclick en línea (inline) en lugar de usando addEventListener, entonces sí se evitará el evento por defecto (por ejemplo con formularios o enlaces).

Eso es con JavaScript puro, dentro de jQuery curiosamente funcionan de manera un poco diferente. En jQuery, return false es equivalente a hacer preventDefault y stopPropagation. Es decir, no sólo se estaría evitando la acción por defecto sino que también se evitaría la propagación del evento a los ancestros del elemento.

Un ejemplo de esto:

$("div").on("click", function() {
  console.log("Evento click del div");
});

$("#enlace1").on("click", function(e) {
  e.preventDefault();
  console.log("Evento click del enlace");
});

$("#enlace2").on("click", function(e) {
  console.log("Evento click del enlace");
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
  <a href="http://www.google.com" id="enlace1">Pulsándome a mí, también se ejecutará la acción del div padre</a>
  <br/>
  <a href="http://www.google.com" id="enlace2">...pero conmigo no</a>
</div>

En StackOverflow en Inglés, hay una pregunta que trata este tema con jQuery más en profundidad.

¿En qué momento utilizar uno o el otro?

Como todo: va a depender del contexto y de lo que quieras hacer. Especialmente si estás trabajando con jQuery, donde return false hace bastante más que simplemente evitar la acción por defecto.

¿Es preferible inclinarse por alguno de los dos mencionados?

Como pongo arriba, va a depender del contexto y de si estás usando JavaScript puro o alguna biblioteca como jQuery. Personalmente me gusta más usar preventDefault, pero es una elección propia.

También deberías pensar en otros factores como lo que pongo en la diferencia en el posicionamiento: si ocurre un error en el controlador del evento, return false nunca se ejecutará. Sé que realmente no es algo tan grave (tienes un error, eso es más grave que no llegar al return), pero un detalle a tener en cuenta.

¿Para qué es el stopImmediatePropagation y qué ventajas tendría al usarlo?

Cuando se asocian múltiples controladores de evento a un elemento, estos se ejecutan en el orden en el que se asociaron. stopImmediatePropagation hace que se detengan las llamadas a los controladores subsecuentes.

Es importante recalcar que no sólo evita que se ejecuten el resto de controladores de evento asociados a ese elemento, sino que también llama a stopPropagation, pot lo que se evita que se llame a los controladores de evento de los ancestros.

¿Qué diferencia existe al usar stopPropagation contra stopImmediatePropagation o utilizarlas en conjunto?

stopPropagation hace que se detenga propagación de eventos hacia los ancestros del elemento (que se pare el efecto "burbuja"). Por ejemplo, en el script anterior, cuando se hacía return false en jQuery (y por tanto se ejecutaba stopPropagation), sólo se ejecutaba el controlador de evento del a pero no el del div.

Pero si el elemento tiene más controladores de evento, stopPropagation no los detendrá, sólo parará la propagación a los ancestros. Con stopImmediatePropagation, sí que se detiene la propagación a los controladores asociados a ese elemento.

Además, como también decía en el punto anterior, stopImmediatePropagation llama a stopPropagation. Es por ello que no tiene sentido usarlos en conjunto: Si vas a usar los dos, te basta con usar stopImmediatePropagation.

Vamos a poner un ejemplo para ilustrarlo: tengo un elemento y le asigno 3 controladores de evento click (A, B y C), donde B tiene un stopImmediatePropagation. Los controladores se ejecutan en el orden en el que se asociaron, por lo que cuando haga click, se ejecutará A, luego B... y nunca se ejecutará C.

$("a").on("click", function(e) { 
  console.log("EVENTO A");
});

$("a").on("click", function(e) { 
  console.log("EVENTO B");
  e.stopImmediatePropagation();
});


$("a").on("click", function(e) { 
  console.log("EVENTO C (nunca se ejecutará)");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Pulsa sobre este enlace</a>

Ese ejemplo es un poco simple por lo que no se ve la utilidad de stopImmediatePropagation, pero imagina que tienes un formulario en el que vas a hacer validación, si algo falla puedes hacer stopImmediatePropagation para que si hay algún otro evento asociado con el formulario, éste no se ejecute.

4
  • Excelente respuesta @Alvaro pero analizando lo que me dices, ¿cuál sería el objetivo de detener o evitar la acción por defecto? Me resulta un poco confuso ya que si pongo un enlace, realmente espero que se respete lo que sea que haga ese enlace, no sé si me explico, a lo mejor un ejemplo de la vida real me dejaría todo esto más claro :)
    – Phi
    Commented el 9 feb. 2017 a las 4:24
  • @Flxtr El objetivo sería para añadir funcionalidad adicional para dar una mejor experiencia y usabilidad. Por ejemplo: las galerías de fotos que se abren en un modal. Cuando pulsas en el enlace de la imagen no quieres que se abra la imagen en la ventana, sino que usas JavaScript y preventDefault para prevenir esa acción y abrir la imagen en un modal. Si el usuario no tuviese activado JavaScript sí que se abriría la imagen por lo que no perdería funcionalidad (o no toda). Otro ejemplo similar serían los menús de muchos sitios web que se abren en paneles al pulsar sobre enlaces
    – Alvaro Montoro
    Commented el 9 feb. 2017 a las 4:42
  • 1
    Otro ejemplo claro es al enviar un formulario usando AJAX. Para ésto debes "prevenir" el comportamiento por defecto, de lo contrario el formulario se enviará de forma estándar, es decir, con recarga del documento.
    – gugadev
    Commented el 9 feb. 2017 a las 13:54
  • @AlvaroMontoro muchas gracias por tomarte este tiempo, fueron muchas cosas nuevas para mí en tu respuesta, por eso mi hasta ahora voy respondiendo. Un saludo!
    – Phi
    Commented el 16 feb. 2017 a las 0:15
6

Repondiendo a las preguntas,

1.- preventDefault() así como bien indica su nombre, cancela la acción o respuesta por defecto. Por ejemplo al presionar un enlace, evita que vaya a la ruta especificada en href, o bien evita enviar un formulario al hacer click en el botón submit, etc. return false detiene la ejecución del código y sale del bloque de la función.

2.- Si tienes una función donde tu parámetro es un array, y hay varias acciones sobre ese parámetro, pero si este viene vacío o undefined, probablemente quieras detener el proceso devolviendo false. En el caso de que quieras enviar un formulario, por ejemplo por ajax, lo recomendable es que al momento de hacer submit, detener la propagación de acción de envío de ese formulario con preventDefault(), pero seguirá con la siguiente linea de código, la cual se encargará de enviar el formulario por ajax.

3.- Debes inclinarte por lo que realmente necesites, pero por lo general para cancelar acciones de inputs o elementos del DOM con jQuery no es recomendable usar return false

4

Llamar a stopPropagation dentro del handler declarado sobre un elemento impide que el evento escale hacia las jerarquías superiores del DOM, pero no impide que se ejecuten los handlers declarados sobre ese elemento.

El comportamiento de stopImmediatePropagation en cambio, no sólo implica (implícitamente) stopPropagation sino que además, dada la existencia de varios handlers, y que éstos se ejecutan en secuencia, el llamado a stopImmediatePropagation en uno de los handlers interrumpe la secuencia, dejando sin ejecutar los handlers restantes.

El orden de la secuencia con que se ejecutan los handlers es una cola que respeta el orden en que fueron declarados.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.