event.preventDefault () vs. return false


2961

Cuando quiero evitar que otros controladores de eventos se ejecuten después de que se active 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 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, debe recordar la carcasa correcta, 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 usarlo preventDefaulten su lugar? ¿Cuál es la mejor manera?


172
Tenga en cuenta que jQuery de preventDefaultqué no evitar que otros lanzadores de ejecución. Para eso stopImmediatePropagationes eso .
Crescent Fresh

19
@CrescentFresh, evita que otros controladores (posteriormente vinculados) se ejecuten ... en el nodo DOM en el que se dispara el evento. Simplemente no impide la propagación.
párpado

37
Estos no son "dos métodos para detener la propagación de eventos". e.preventDefault (); evita la acción predeterminada, no detiene la propagación de eventos, que se realiza mediante e.stopPropagation ().
Timo Tijhof

24
Esta pregunta y sus respuestas son sobre jQuery. Si vino aquí buscando una respuesta simple de JavaScript, vea event.preventDefault () vs. return false (no jQuery)
Oriol

55
Esta respuesta tiene una tabla que lo explica todo stackoverflow.com/a/5302939/759452
Adrien Be

Respuestas:


2818

return falsedesde 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 brote y return falsehará ambas cosas. Observe que este comportamiento difiere de la normal de controladores de eventos (no jQuery), en el que, sobre todo, return falsehace no detienen el caso de burbujeo.

Fuente: John Resig

¿Algún beneficio al usar event.preventDefault () sobre "return false" para cancelar un clic href?


126
return falsedesde un controlador DOM2 ( addEventListener) no hace nada (ni previene el valor predeterminado ni deja de burbujear; desde un controlador Microsoft DOM2-ish ( attachEvent), evita el valor predeterminado pero no burbujea; desde un controlador DOM0 ( onclick="return ..."), evita el valor predeterminado (siempre incluye el returnen el atributo) pero no burbujea; desde un controlador de eventos jQuery, hace ambas cosas, porque eso es una cosa jQuery. Detalles y pruebas en vivo aquí
TJ Crowder

12
Sería útil definir "Propagación" y "Predeterminado" aquí. Por mi parte, sigo confundiéndolos. ¿Es esto correcto? Propagación = mi código (controladores de eventos de JavaScript para elementos principales). Predeterminado = código del navegador (enlaces, selección de texto, etc.)
Bob Stein

55
¿Qué significa realmente el burbujeo? ¿ejemplo?
Govinda Sakhare

55
1 para señalar que return falsequé no detener la propagación de eventos en los controladores de eventos no jQuery. es decir <a href="#" onclick="return false">Test</a>, no impide que el evento brote.
Doug S

424

Según mi experiencia, hay al menos una clara ventaja al usar event.preventDefault () sobre el uso de return false. Suponga que está capturando el evento de clic en una etiqueta de anclaje, de lo contrario, sería un gran problema si el usuario fuera alejado 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 llegue a la declaración de retorno 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, lo que garantiza 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.
});

68
Si bien es cierto, el comportamiento opuesto a menudo es preferible cuando se realiza una mejora progresiva (que creo que es probablemente la razón más probable para anular una acción predeterminada)
meandmycode

Ambas son formas de bloquear el comportamiento predeterminado de un evento, es solo una cuestión de qué problema estás tratando de resolver.
Ferkze

102

Esto no es, como lo ha titulado, una pregunta "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 de malentendidos de cómo funcionan los controladores de eventos en general.

Hecho: Un controlador de eventos que devuelve falso evita 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.

La documentación de MDN explica cómo funciona return falseun controlador de eventos

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

Para obtener más información, consulte attachEvent en MSDN y la documentación de eventos W3C DOM 2 .


66
@rds Eso dice "preventDefault no detiene la propagación del evento a través del DOM. event.stopPropagation debe usarse para eso".
Garrett

Una respuesta a una pregunta estrechamente relacionada alega que antes de HTML 5, devolver falso de un controlador de eventos no se especificó como hacer nada en absoluto. Ahora, tal vez esa es una interpretación incorrecta de la especificación (difícil de entender), o tal vez a pesar de que no se especifica literalmente, todos los navegadores interpretaron return falselo mismo que event.preventDefault(). Pero no sé; es suficiente para hacerme tomar esto con una pizca de sal.
Mark Amery

99
Odio cómo cada resultado de búsqueda de JavaScript en Google es realmente sobre jQuery, +1
Alexander Derck

Lo ha etiquetado como JavaScript y jQuery, y ambos son correctos. jQueryes simplemente un subconjunto de JavaScript, no su propio lenguaje.
ProfK


57

Cuando usa jQuery, return falseestá haciendo 3 cosas separadas cuando lo llama:

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

Consulte jQuery Events: Stop (Mis) Using Return False para obtener más información y ejemplos.


Si otras partes del código están escuchando este evento, event.stopPropagation (); cancelará su devolución de llamada?
Ferkze

41

Puede colgar muchas funciones en el onClickevento para un elemento. ¿Cómo puedes estar seguro de falseque será el último en disparar? preventDefaultpor otro lado, definitivamente evitará solo el comportamiento predeterminado del elemento.


20

Yo creo que

event.preventDefault()

es la forma especificada por w3c de cancelar eventos.

Puede leer esto en la especificación del W3C sobre cancelación de eventos .

Además, no puede usar return false en todas las situaciones. Al proporcionar una función javascript en el atributo href y si devuelve falso, el usuario será redirigido a una página con una cadena falsa escrita.


44
No en ningún navegador que haya conocido. ¿Quizás lo confundes con <a href="javascript:return false"o algo así?
mplungjan

10
-1; la afirmación de que un href que devuelve falso generará una página de texto con la palabra "falso" escrita en él no tiene ningún sentido.
Mark Amery el

1
(menos) 1; enlace roto + sin sentido completo
Phil

15

Creo que la mejor manera de hacerlo es usarlo event.preventDefault()porque si se genera alguna excepción en el controlador, falsese omitirá la declaración return y el comportamiento será opuesto a lo que desea.

Pero si está seguro de que el código no activará ninguna excepción, puede optar por cualquiera de los métodos que desee.

Si aún desea ir con el retorno false, puede poner su código de controlador completo en un bloque de prueba como se muestra a continuación:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

1

Mi opinión según mi experiencia dice que siempre es mejor usar

event.preventDefault() 

Prácticamente para detener o evitar el evento de envío, siempre que lo solicitemos en lugar de que return false event.preventDefault()funcione bien.


11
Mejor por qué? Literalmente ha dado cero justificación alguna aquí. -1.
Mark Amery el

En el caso de que haya varios enlaces de eventos, e.preventDefault () es más específico que return false.
Taiger

preventDefaultes algunas palabras en inglés lo entiendo "evita el valor predeterminado". return falseson algunas palabras en inglés que entiendo "devuelve falso" pero no tengo idea de por qué hasta que busco en Google este código críptico. Y bono, puedo controlar por separado stopPropagationy preventDefault .
Joan

1

La principal diferencia entre return falsey event.preventDefault()es que su código a continuación return falseno se ejecutará y en event.preventDefault()caso de que su código se ejecute después de esta declaración.

Cuando escriba return false, haga lo siguiente por usted detrás de escena.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

1

e.preventDefault ();

Simplemente detiene la acción predeterminada de un elemento.

Instancia Ej .:

evita que el hipervínculo siga la URL, evita que el botón enviar envíe el formulario. Cuando tienes muchos controladores de eventos y solo quieres evitar que ocurran eventos predeterminados, y que ocurran muchas veces, para eso necesitamos usar en la parte superior de la función ().

Razón:-

La razón para usar e.preventDefault();es que en nuestro código, por lo que algo sale mal en el código, entonces permitirá ejecutar el enlace o formulario para enviarlo o permitir ejecutar o permitir cualquier acción que necesite hacer. El botón & link o submit se enviará y aún permitirá una mayor propagación del evento.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

falso retorno;

Simplemente detiene la ejecución de la función ().

" return false;" finalizará toda la ejecución del proceso.

Razón:-

La razón para usar return false; es que ya no quieres ejecutar la función en modo estrictamente.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


1

Básicamente, de esta manera combinas cosas porque jQuery es un marco que se centra principalmente en elementos HTML, básicamente evitas el valor predeterminado, pero al mismo tiempo, detienes la propagación para que surja.

Entonces, simplemente podemos decir, return false in jQueryes igual a:

return false es e.preventDefault AND e.stopPropagation

Pero tampoco olvide que todo está en jQuery o funciones relacionadas con DOM, cuando lo ejecuta en el elemento, básicamente, evita que todo se active, incluido el comportamiento predeterminado y la propagación del evento.

Básicamente, antes de comenzar a usar return false;, primero entienda qué e.preventDefault();y e.stopPropagation();hacer, luego, si cree que necesita ambos al mismo tiempo, simplemente utilícelo.

Entonces, básicamente, este código a continuación:

$('div').click(function () {
  return false;
});

es igual a este código:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

1

Desde mi experiencia, event.stopPropagation () se utiliza principalmente en efectos de CSS o trabajos de animación, por ejemplo, cuando tiene un efecto de desplazamiento para el elemento de la tarjeta y el botón, cuando se desplaza sobre el botón, el efecto de desplazamiento de la tarjeta y los botones se activará en este caso , puede usar event.stopPropagation () para detener las acciones burbujeantes, y event.preventDefault () es para evitar el comportamiento predeterminado de las acciones del navegador. Por ejemplo, tiene un formulario, pero solo definió el evento de clic para la acción de envío, si el usuario envía el formulario presionando enter, el navegador se activará con el evento de pulsación de tecla, no su evento de clic aquí, debe usar event.preventDefault () para evitar comportamiento. No sé qué demonios es volver falso; lo siento, para más aclaraciones visita este enlace y juega con la línea # 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.