> ¿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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> document.querySelector("#enlace1").addEventListener("click", function(e) { e.preventDefault(); }); document.querySelector("#enlace2").addEventListener("click", function(e) { return false; }); <!-- language: lang-html --> <a href="http://es.stackoverflow.com" id="enlace1">Yo no redirecciono</a>... <a href="http://es.stackoverflow.com" id="enlace2">pero yo sí</a> <!-- end snippet --> 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: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("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; }); <!-- language: lang-html --> <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> <!-- end snippet --> En StackOverflow en Inglés, hay [una pregunta que trata este tema con jQuery][1] 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("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á)"); }); <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#">Pulsa sobre este enlace</a> <!-- end snippet --> 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. [1]: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false