> ¿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