event.preventDefault() frente a devolver falso
Cuando quiero evitar que se ejecuten otros controladores de eventos después de que se activa un determinado evento, puedo usar una de dos técnicas. Usaré jQuery en los ejemplos, pero esto también se aplica a JS simple:
1.event.preventDefault()
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
2.return false
$('a').click(function () {
// custom handling here
return false;
});
¿Existe alguna diferencia significativa entre esos dos métodos para detener la propagación de eventos?
Para mí, return false;es más simple, más corto y probablemente menos propenso a errores que ejecutar un método. Con el método, debes recordar las mayúsculas y minúsculas correctas, los paréntesis, etc.
Además, tengo que definir el primer parámetro en la devolución de llamada para poder llamar al método. ¿Quizás hay algunas razones por las que debería evitar hacerlo así y usarlo preventDefaulten su lugar? ¿Cuál es la mejor manera?
return falsedesde dentro de un controlador de eventos jQuery es efectivamente lo mismo que llamar a ambos e.preventDefaulty e.stopPropagational objeto jQuery.Event pasado.
e.preventDefault()evitará que ocurra el evento predeterminado, e.stopPropagation()evitará que el evento se propague y return falsehará ambas cosas. Tenga en cuenta que este comportamiento difiere de los controladores de eventos normales (que no son jQuery), en los que, en particular, return falseno impide que el evento se genere.
Fuente: John Resig
¿Algún beneficio de usar event.preventDefault() en lugar de "devolver falso" para cancelar un clic de href?
Según mi experiencia, existe al menos una clara ventaja al usar event.preventDefault() sobre el uso de return false. Supongamos que está capturando el evento de clic en una etiqueta de anclaje; de lo contrario, sería un gran problema si el usuario saliera de la página actual. Si su controlador de clics utiliza return false para evitar la navegación del navegador, abre la posibilidad de que el intérprete no alcance la declaración de devolución y el navegador procederá a ejecutar el comportamiento predeterminado de la etiqueta de anclaje.
$('a').click(function (e) {
// custom handling here
// oops...runtime error...where oh where will the href take me?
return false;
});
El beneficio de usar event.preventDefault() es que puede agregar esto como la primera línea en el controlador, garantizando así que el comportamiento predeterminado del ancla no se activará, independientemente de si no se alcanza la última línea de la función (por ejemplo, error de tiempo de ejecución). ).
$('a').click(function (e) {
e.preventDefault();
// custom handling here
// oops...runtime error, but at least the user isn't navigated away.
});
Esta no es, como la tituló, una pregunta de "JavaScript"; es una pregunta sobre el diseño de jQuery.
jQuery y la cita previamente vinculada de John Resig (en el mensaje de karim79 ) parecen ser la fuente del malentendido sobre cómo funcionan los controladores de eventos en general.
Hecho: Un controlador de eventos que devuelve false impide la acción predeterminada para ese evento. No detiene la propagación del evento. Los controladores de eventos siempre han funcionado de esta manera, desde los viejos tiempos de Netscape Navigator.
Los atributos de contenido del controlador de eventos y los atributos IDL del controlador de eventos que devuelven false impiden la acción predeterminada para ese controlador de eventos.
Lo que sucede en jQuery no es lo mismo que ocurre con los controladores de eventos. Los detectores de eventos DOM y los eventos "adjuntos" de MSIE son un asunto completamente diferente.
Para obtener más información, consulte la [[documentación de eventos W3C DOM 2]][1].
Generalmente tu primera opción ( preventDefault()) es la que debes tomar, pero tienes que saber en qué contexto estás y cuáles son tus objetivos.
Fuel Your Coding tiene un excelente artículo sobre return false;vs event.preventDefault()vs event.stopPropagation()vs.event.stopImmediatePropagation()
Cuando usas jQuery, return falsehaces 3 cosas separadas cuando lo llamas:
event.preventDefault();event.stopPropagation();- Detiene la ejecución de la devolución de llamada y regresa inmediatamente cuando se le llama.
Consulte Eventos de jQuery: dejar de usar (mal) usar Return False para obtener más información y ejemplos.
Puedes colgar muchas funciones en el onClickevento para un elemento. ¿Cómo puedes estar seguro de que falseserá el último en disparar? preventDefaultpor otro lado, definitivamente evitará solo el comportamiento predeterminado del elemento.
