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