event.preventDefault () vs. return false

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?

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?

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

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 .

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

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

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.

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.

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.

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

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.

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

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>

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

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