event.preventDefault () frente a devolver falso

return false a partir de octubre XNUMX 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 false sí no evitar que el evento burbujee.

Fuente: Juan Resig

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

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

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 a partir de octubre XNUMX 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 el Documentación de eventos W3C DOM 2.

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().

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.

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

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.

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.

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

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.

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

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>

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

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

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 ()