event.preventDefault () frente a devolver falso

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;
});

¿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, debe recordar acerca de la correcta carcasa, 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 usar preventDefault ¿en lugar de? ¿Cuál es la mejor forma?

preguntado el 31 de agosto de 09 a las 08:08

Tenga en cuenta que jQuery's preventDefaultno evitar que otros jugadores se ejecuten. Eso es lo que stopImmediatePropagation es para. -

@CrescentFresh, evita que otros controladores (posteriormente vinculados) se ejecuten ... en el nodo DOM en el que se activa el evento. Simplemente no evita la propagación. -

¿Estos no son "dos métodos para detener la propagación de eventos?" e.preventDefault (); previene la acción predeterminada, no detiene la propagación de eventos, que se realiza mediante e.stopPropagation (). -

Esta pregunta y sus respuestas son sobre jQuery. Si vino aquí buscando una respuesta simple de JavaScript, consulte event.preventDefault () frente a devolver falso (sin jQuery) -

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

14 Respuestas

return false desde dentro de un controlador 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á ambas cosas. Tenga en cuenta que este comportamiento difiere de normal (no jQuery) controladores de eventos, en los que, en particular, return falseno evitar que el evento burbujee.

Fuente: Juan Resig

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

Respondido el 09 de Septiembre de 16 a las 16:09

return false desde un controlador DOM2 (addEventListener) no hace nada en absoluto (ni evita el valor predeterminado ni detiene el burbujeo; de un controlador Microsoft DOM2-ish (attachEvent), evita el burbujeo predeterminado pero no; desde un controlador DOM0 (onclick="return ..."), evita el valor predeterminado (siempre que incluya el return en el atributo) pero no burbujeando; desde un controlador de eventos jQuery, hace ambas cosas, porque eso es algo de jQuery. Detalles y pruebas en vivo aquí - TJ Crowder

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

¿Qué significa realmente burbujear? ¿ejemplo? - Govinda Sakhare

+1 por notar que return falseno detener la propagación de eventos en controladores de eventos que no sean de jQuery. es decir <a href="#" onclick="return false">Test</a>no evitar que el evento burbujee. - doug s

Desde 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 navegado fuera de la página actual. Si su controlador de clics usa 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 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 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.
});

Respondido el 22 de enero de 11 a las 22:01

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á tratando de resolver. - Ferkze

Esta no es, como la ha titulado, una pregunta de "JavaScript"; es una pregunta sobre el diseño de jQuery.

jQuery y el cita previamente vinculada desde Juan Resig (en karim79's mensaje) parecen ser la fuente de malentendidos sobre 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.

El 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 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 Documentación de eventos W3C DOM 2.

contestado el 23 de mayo de 17 a las 13:05

@rds Que dice "preventDefault no detiene la propagación del evento a través del DOM. event.stopPropagation debería usarse para eso". - Garrett

An https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be en una pregunta estrechamente relacionada, alega que antes de HTML 5, devolver falso de un controlador de eventos no especificada como hacer cualquier cosa. Ahora, tal vez sea una interpretación incorrecta de la especificación (difícil de entender), o tal vez a pesar de que no se especificó literalmente, todos los navegadores interpretaron return false lo mismo que event.preventDefault(). Pero no lo sé; es suficiente para hacerme tomar esto con una pizca de sal. - marca amery

Odio que cada resultado de búsqueda de JavaScript en Google sea en realidad sobre jQuery, +1 - alexander deck

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

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

Alimente su codificación tiene un gran artículo sobre return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

Respondido el 04 de enero de 19 a las 18:01

@VisruthCV Ver mi nota agregada con enlace a la versión de archivo - JAAulde

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 la devolución de llamada y regresa inmediatamente cuando se llama.

Vea Eventos de jQuery: Detener (incorrectamente) usando Return False para obtener más información y ejemplos.

Respondido 03 Oct 16, 19:10

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

Puede colgar muchas funciones en el 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.

respondido 31 mar '14, 01:03

Creo que el

event.preventDefault()

es la forma especificada por w3c de cancelar eventos.

Puede leer esto en la especificación W3C en Cancelación de eventos.

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

respondido 31 mar '14, 01:03

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

-1; la afirmación de que un href que devuelve falso generará una página de texto con la palabra "falso" escrita es una completa tontería. - marca amery

(menos) 1; enlace roto + completa tontería - Phil

Creo que la mejor forma de hacerlo es utilizar event.preventDefault() porque si se genera alguna excepción en el controlador, entonces el retorno false se omitirá la declaración y el comportamiento será opuesto al 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 aun quieres ir con la vuelta false, luego puede poner todo su código de controlador en un bloque de captura de prueba como se muestra a continuación:

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

Respondido el 17 de enero de 18 a las 15:01

Mi opinión de mi experiencia diciendo que siempre es mejor usar

event.preventDefault() 

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

Respondido 21 ago 15, 07:08

Mejor por qué? Literalmente, no ha dado ninguna justificación aquí. -1. - marca amery

En el caso de que haya múltiples enlaces de eventos, e.preventDefault () es más específico que devolver falso. - Tigre

preventDefault son algunas palabras en inglés que entiendo que "previene el valor predeterminado". return false son algunas palabras en inglés. Lo entiendo "devuelve falso" pero no tengo idea de por qué hasta que busqué en Google este código críptico. Y bono, puedo controlar por separado stopPropagation y preventDefault . - Joan

La principal diferencia entre return false y event.preventDefault() es ese tu código a continuación return false no se ejecutará y en event.preventDefault() caso su código se ejecutará después de esta declaración.

Cuando escribe return false, hace las siguientes cosas detrás de escena.

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

Respondido 09 Feb 18, 08:02

E.preventDefault ();

Simplemente detiene la acción predeterminada de un elemento.

Ejemplo de instancia:

evita que el hipervínculo siga la URL, evita que el botón enviar para enviar el formulario. Cuando tiene muchos controladores de eventos y solo desea evitar que ocurra un evento predeterminado, y que ocurra muchas veces, para eso debemos usarlo en la parte superior de la función ().

Razón:-

La razón para usar e.preventDefault(); es que en nuestro código algo sale mal en el código, entonces permitirá ejecutar el enlace o formulario para ser enviado o permitir ejecutar o permitir cualquier acción que necesite hacer. Se enviará un enlace o botón de envío 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;"pondrá fin a toda la ejecución del proceso.

Razón:-

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

<!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>

Respondido 27 Abr '18, 07:04

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

Entonces podemos simplemente decir, devolver falso en jQuery es igual a:

return false es e.preventDefault AND e.stopPropagation

Pero tampoco olvide que todo está en funciones relacionadas con jQuery o 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 entiende que e.preventDefault(); y e.stopPropagation(); hacer, entonces, si cree que necesita ambos al mismo tiempo, simplemente úselo.

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

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

is igual a este código:

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

Respondido 18 Jul 18, 12:07

Desde mi experiencia, event.stopPropagation () se usa principalmente en trabajos de animación o efectos CSS, por ejemplo, cuando tiene un efecto de desplazamiento tanto para la tarjeta como para el elemento del 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 de propagación, y event.preventDefault () es para evitar el comportamiento predeterminado de las acciones del navegador. Por ejemplo, tiene un formulario pero solo ha definido un evento de clic para la acción de envío, si el usuario envía el formulario presionando enter, el navegador se activa por el evento de pulsación de tecla, no su evento de clic aquí, debe usar event.preventDefault () para evitar inapropiados comportamiento. No sé qué diablos es devolver falso; Lo siento. Para más aclaraciones, visite este enlace y juegue con la línea # 33 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

contestado el 14 de mayo de 19 a las 06:05

Prevenir incumplimiento

Llamar a preventDefault () durante cualquier etapa del flujo de eventos cancela el evento, lo que significa que no se producirá ninguna acción predeterminada normalmente realizada por la implementación como resultado del evento. Puede utilizar Event.

falso retorno

return false dentro de una devolución de llamada evita el comportamiento predeterminado. Por ejemplo, en un evento de envío, no envía el formulario. return false también deja de burbujear, por lo que los padres del elemento no sabrán que ocurrió el evento. return false es equivalente a event.preventDefault () + event.stopPropagation ()

Respondido el 02 de enero de 21 a las 11:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.