Pregunta event.preventDefault () vs. return false


Cuando quiero evitar que otros controladores de eventos se ejecuten después de que se desencadena un determinado evento, puedo usar una de dos técnicas. Usaré jQuery en los ejemplos, pero esto también se aplica a plain-JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

¿Hay alguna diferencia significativa entre esos dos métodos para detener la propagación de eventos?

Para mi, return false; es más simple, más corto y probablemente menos propenso a errores que la ejecución de un método. Con el método, debes recordar la carcasa correcta, 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. Tal vez, hay algunas razones por las que debería evitar hacerlo así y usar preventDefault ¿en lugar? ¿Cuál es la mejor manera?


2646
2017-08-31 11:58


origen


Respuestas:


return false de dentro de un manejador de eventos jQuery es efectivamente lo mismo que llamar a ambos e.preventDefault y e.stopPropagation en el pasado Objeto jQuery.Event.

e.preventDefault() evitará que ocurra el evento predeterminado, e.stopPropagation() evitará que el evento burbujee y return false hará las dos cosas Tenga en cuenta que este comportamiento difiere de normal manejadores de eventos (no jQuery), en los cuales, notablemente return false hace no evitar que el evento burbujee.

Fuente: John Resig

¿Algún beneficio de utilizar event.preventDefault () sobre "return false" para cancelar un href click?


2596
2017-08-31 12:05



Desde mi experiencia, hay al menos una clara ventaja cuando se usa event.preventDefault () sobre el uso de return false. Supongamos que está capturando el evento click en una etiqueta ancla, de lo contrario, sería un gran problema si el usuario fuera navegado fuera de la página actual. Si su manejador de clics utiliza return false para evitar la navegación del navegador, abre la posibilidad de que el intérprete no llegue a la declaración de devolución y el navegador proceda 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 disparará, 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.
});

392
2018-01-22 22:37



Esto no es, como lo has titulado, una pregunta de "JavaScript"; es una pregunta sobre el diseño de jQuery.

jQuery y el cita previamente vinculada de John Resig (en karim79's  mensaje) parecen ser la fuente de la incomprensión de cómo funcionan los controladores de eventos en general.

Hecho: un controlador de eventos que devuelve falso impide la acción predeterminada para ese evento. No detiene la propagación del evento. Los controladores de eventos siempre han trabajado de esta manera, desde los viejos tiempos de Netscape Navigator.

los documentación de MDN explica cómo return false en un controlador de eventos funciona

Lo que sucede en jQuery no es lo mismo que sucede con los manejadores de eventos. Los detectores de eventos DOM y los eventos "adjuntos" de MSIE son un asunto completamente diferente.

Para leer más, ver attachEvent en MSDN y el Documentación de eventos W3C DOM 2.


89
2018-06-20 21:31



En general, su primera opción (preventDefault()) es el que debe tomar, pero debe saber en qué contexto se encuentra y cuáles son sus objetivos.

Fuel Your Coding tiene un gran artículo sobre return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

NOTA: los Fuel Your Coding El enlace de arriba ha estado produciendo errores 5xx por bastante tiempo. Encontré una copia en el Archivo de Internet, lo imprimió en PDF y lo puso en Dropbox: Archivado artículo sobre return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Al usar jQuery, return false está haciendo 3 cosas separadas cuando lo llamas:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Detiene la ejecución de devolución de llamada y regresa inmediatamente cuando se llama.

Ver Eventos de jQuery: Detener (Mis) Usar Volver Falso para más información y ejemplos.


51
2018-02-19 15:54



Puede colgar muchas funciones en onClick evento para un elemento. ¿Cómo puedes estar seguro de que false uno será el último en disparar? preventDefault por otro lado, definitivamente evitará solo el comportamiento predeterminado del elemento.


37
2017-08-31 12:02



creo

event.preventDefault()

es la forma especificada w3c de cancelar eventos.

Puedes leer esto en la especificación W3C en Cancelación de evento.

Además, no puede usar return false en cada situación. Al dar una función de javascript en el atributo href y si devuelve falso, el usuario será redireccionado a una página con la falsa cadena escrita.


17
2017-08-31 12:04