2985 votos

event.preventDefault() vs return false

Cuando quiero evitar que otros controladores de eventos se ejecuten después de que un determinado evento es disparado, puedo usar una de las dos técnicas. Voy a utilizar jQuery en los ejemplos, pero esto también se aplica a simple 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 los dos métodos de detener la propagación de eventos?

Para mí, return false; es más sencillo, breve y probablemente menos propenso a errores que la ejecución de un método. Con el método, usted tiene que acordarse de las mayúsculas, paréntesis, etc.

También, tengo que definir el primer parámetro de devolución de llamada para ser capaz de llamar al método. ¿Tal vez hay algunas razones por las que debo evitar hacerlo como esta y usar preventDefault lugar? ¿Cuál es la mejor manera?

2829voto

karim79 Puntos 178055

return false desde dentro de un controlador de eventos de jQuery es efectivamente lo mismo que el de llamar tanto ae.preventDefault y a e.stopPropagation sobre el jQuery.Event object. pasado

e.preventDefault() va a impedir que el comportamiento por defecto se produzca, e.stopPropagation() va a evitar que el evento se propague y return false va a hacer ambos. Tenga en cuenta que este comportamiento difiere de los controladores de eventos normales (sin jQuery), en los que, en particular, return false no detiene la propagación del evento.

Fuente: John Resig

http://www.mail-archive.com/jquery-en@googlegroups.com/msg71371.html

426voto

Jeff Poulton Puntos 2951

Desde mi experiencia, hay al menos una clara ventaja cuando se utiliza event.preventDefault() sobre el uso de return false. Supongamos que usted se captura el evento clic en una etiqueta de anclaje, de lo contrario, que sería un gran problema si el usuario para navegar fuera de la página actual. Si su controlador haga clic en usa return false para evitar que el navegador de navegación, se abre la posibilidad de que el intérprete de no llegar a la instrucción return y el navegador se procederá a ejecutar la etiqueta de anclaje del comportamiento predeterminado.

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

  // oops...runtime error...where oh where will the href take me?

  return false;
});

El beneficio de utilizar event.preventDefault() es que usted puede agregar a esta como la primera línea en el controlador, de modo que se garantiza que el ancla del comportamiento predeterminado no de fuego, independientemente de si la última línea de la función no es alcanzado (ej. error en 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.
});

103voto

Garrett Puntos 1534

Esto no es, como han titulado, un "JavaScript" pregunta; es una pregunta con respecto al diseño de jQuery, como se indica en la Christoph del comentario.

jQuery y el vinculado previamente cita de John Resig (en karim79 del mensaje) parece ser el origen de la incomprensión de cómo los controladores de eventos en general el trabajo.

Hecho: Un controlador de eventos que devuelve false evita la acción predeterminada para ese evento. No se detiene la propagación de eventos. Los controladores de eventos siempre han trabajado de esta manera, desde los viejos días de Netscape Navigator.

La siguiente documentación de MDC se explica cómo return false en un controlador de eventos de obras: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action

Lo que sucede en jQuery no es lo mismo que lo que sucede con los controladores de eventos. DOM detectores de eventos y MSIE "adjunto" los eventos son otro asunto.

Para leer más, ver attachEvent en MSDN y el W3C DOM 2 documentación de los hechos.

68voto

JAAulde Puntos 10235

Por lo general, su primera opción (preventDefault()) es el que tiene que tomar, pero usted tiene que saber en qué contexto en la que está y cuáles son sus objetivos. Un gran artículo sobre el asunto: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

58voto

James Drinkard Puntos 2688

return false está haciendo 3 cosas separadas cuando usted lo llame:

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

Ver jQuery Eventos: Stop (Mal)Uso de Return False para obtener más información y ejemplos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X