Depende de lo que quieras hacer, si bien que el hecho de que la funcion hazAlgo()
devuelva false
es prácticamente lo mismo que que llamar a event.preventDefault()
y event.stopPropagation()
(que no lo mencionas), no es lo mismo que llamar a event.stopImmediatePropagation()
.
Ahora entro a hablar de los detalles:
- Que la función
hazAlgo()
devuelva false
: tendrá las siguientes consecuencias. Parará la capilaridad (o bubbling
) del evento, evitando que se disparen los eventListener
de los elementos que contengan a quien dispara el evento. Parará la acción por defecto del evento (en un formulario, por ejemplo, que se envíe) y NO detendrá la ejecución de los demás eventListener
que haya para ese elemento.
const preventMe = () => false;
const printMeA = () => {
// Se ejecutará porque devolver false no previene los eventListeners del mismo elemento
console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
// No se ejecutará porque devolver false previene la capilaridad
console.log('Me han pulsado, soy el div')
}
$('a').on('click', preventMe);
$('a').on('click', printMeA);
$('div').on('click', printMeDiv);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="https://es.stackoverflow.com">Púlsame</a>
</div>
- Que la función
hazAlgo()
llame a event.preventDefault()
: tendrá las siguientes consecuencias. NO parará la capilaridad del evento, así que los eventListener
de los elementos que lo contengan sí se ejecutarán. Parará la acción por defecto evento y NO dentendrá la ejecución de los demás eventListener
que haya para este elemento.
const preventMe = (e) => {e.preventDefault()};
const printMeA = () => {
// Se ejecutará porque llamar a e.preventDefault() no previene los eventListeners del mismo elemento
console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
// Se ejecutará porque llamar a e.preventDefault() no previene la capilaridad
console.log('Me han pulsado, soy el div')
}
$('a').on('click', preventMe);
$('a').on('click', printMeA);
$('div').on('click', printMeDiv);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="https://es.stackoverflow.com">Púlsame</a>
</div>
- Que la función
hazAlgo()
llame a event.stopImmediatePropagation()
: tendrá las siguientes consecuencias. Detendrá la capilaridad del evento, evitando que se disparen los eventListeners
de los elementos que contengan a quien dispara el evento. NO detendrá la acción por defecto del evento(es decir, si es un enlace, continuará con la acción del enlace) y detendrá la ejecución de los demás eventListener
.
const preventMe = (e) => {e.stopImmediatePropagation();};
const printMeA = () => {
// NO se ejecutará porque e.stopImmediatePropagation previene los eventListeners del mismo elemento
console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
// No se ejecutará porque e.stopImmediatePropagation previene la capilaridad
console.log('Me han pulsado, soy el div')
}
$('a').on('click', preventMe);
$('a').on('click', printMeA);
$('div').on('click', printMeDiv);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="https://es.stackoverflow.com">Púlsame</a>
</div>
- Que la función
hazAlgo()
llame a event.stopPropagation()
: No la mencionas, pero la pongo como bola extra. Ocurrirá lo siguiente. Detendrá la capilaridad
del evento, NO prevendrá la acción por defecto del evento y NO prevendrá los demás eventListeners
del elemento.
const preventMe = (e) => {e.stopPropagation();};
const printMeA = () => {
// Se ejecutará porque e.stopPropagation NO previene los eventListeners del mismo elemento. Lo pongo en alert en lugar de console.log para que se aprecie
alert('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
// No se ejecutará porque e.stopPropagation previene la capilaridad
console.log('Me han pulsado, soy el div')
}
$('a').on('click', preventMe);
$('a').on('click', printMeA);
$('div').on('click', printMeDiv);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="https://es.stackoverflow.com">Púlsame</a>
</div>
Dicho todo esto, podría resumirse en la siguiente tabla:
| Acción | DetieneCapilaridad | Detiene Acción por Defecto | Detiene acciones sobre el mismo elemento |
|------------------------------|:------------------:|:--------------------------:|:----------------------------------------:|
| devolver `false` | Sí | Sí | No |
| e.preventDefault() | No | Sí | No |
| e.stopPropagation() | Sí | No | No |
| e.stopImmediatePropagation() | Sí | No | Sí |
return false
,preventDefault
,stopPropagation
ystopImmediatePropagation
.