form - preventdefault javascript para que sirve

event.preventDefault() vs. return false

Question

Cuando quiero evitar que otros manejadores de eventos se ejecuten después de que se active un evento determinado, 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 estos 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 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 usar preventDefault lugar. ¿Cuál es la mejor manera?

Answer 1

Básicamente, de esta manera se combinan las cosas porque jQuery es un marco que se enfoca principalmente en los elementos HTML, básicamente evitando el valor predeterminado, pero al mismo tiempo, detiene la propagación para aumentar.

Así que simplemente podemos decir, devolver falso en jQuery es igual a:

devolver falso es e.preventDefault AND e.stopPropagation

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

Básicamente antes de comenzar a usar return false; , primero entiende lo que e.preventDefault(); y e.stopPropagation(); hazlo, luego, si crees que necesitas ambos al mismo tiempo, simplemente úsalo.

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

Answer 2

Creo que la mejor manera de hacer esto es usar event.preventDefault() porque si se produce alguna excepción en el controlador, entonces se omitirá la declaración de devolución false y el comportamiento será opuesto al que se desea.

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

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

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

Answer 3

Cuando usas jQuery, return false está haciendo 3 cosas separadas cuando lo llamas:

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

Para obtener más información y ejemplos, consulte Eventos jQuery: deje de usar (Mis) Devolver falso .

Answer 4

Desde mi experiencia, hay al menos una clara ventaja al usar event.preventDefault () sobre el uso de return false. Supongamos 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 clic utiliza el retorno falso para evitar la navegación del navegador, se 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;
});

La ventaja 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 que no se alcance 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.
});

Answer 5

En general, tu primera opción ( preventDefault() ) es la que debes tomar, pero debes saber en qué contexto estás y cuáles son tus objetivos.

Fuel Your Coding tiene un gran artículo sobre return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

NOTA: El enlace anterior de Fuel Your Coding ha estado produciendo errores 5xx durante bastante tiempo. Encontré una copia en el archivo de Internet , la imprimí en PDF y la puse en Dropbox: el artículo archivado return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

Answer 6

Esto no es, como lo has titulado, una pregunta de "JavaScript"; Es una pregunta sobre el diseño de jQuery.

jQuery y la cita previamente enlazada de John Resig (en karim79''s message karim79''s ) parecen ser la fuente de la incomprensión de cómo funcionan los manejadores 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 manejadores 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 false en un 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 una cuestión totalmente diferente.

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

Answer 7

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

Cuando escribes, devuelve falso, haz lo siguiente por ti detrás de escena.

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

Answer 8

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

event.preventDefault() 

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

Answer 9

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

Answer 10

Yo creo que

event.preventDefault()

Es la forma especificada w3c de cancelar eventos.

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

Además, no se puede utilizar el retorno falso en cada situación. Al dar 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.

Answer 11

return false desde dentro de un controlador de eventos jQuery es efectivamente lo mismo que llamar tanto a e.preventDefault como a e.stopPropagation en el objeto jQuery.Event pasado .

e.preventDefault() evitará que se produzca el evento predeterminado, e.stopPropagation() evitará que el evento se e.stopPropagation() y return false hará ambas cosas. Tenga en cuenta que este comportamiento difiere de los controladores de eventos normales (no jQuery), en los que, en particular, return false no impide que el evento se acumule.

Fuente: John Resig

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

Answer 12

e.preventDefault ();

Simplemente detiene la acción por defecto de un elemento.

Ejemplo de instancia:

impide que el hipervínculo siga la URL, impide que el botón de envío envíe el formulario. Cuando tiene muchos manejadores de eventos y solo quiere evitar que ocurra el evento predeterminado, y que ocurra muchas veces, para eso necesitamos 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 va mal en el código, luego permitirá ejecutar el enlace o formulario para enviarlo o permitir que se ejecute o permita cualquier acción que necesite hacer. El botón de enlace o enviar 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 devuelve falso; es que ya no desea 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>