Evento.preventDefault () vs. devolver falso

Cuando quiero que se ejecuten otros controladores de eventos después de que se haya activado un evento en particular, puedo usar uno de los dos métodos. 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 una diferencia significativa entre estas dos formas de detener la propagación del evento?

Para mí, return false; Más simple, más corto y, probablemente, menos propenso a errores que ejecutar un método. Con este método, debe tener en cuenta el caso correcto, los corchetes, etc.

Además, debo definir el primer parámetro en la devolución de llamada para poder llamar al método. Tal vez hay varias razones por las que debería evitar esto y usar preventDefault lugar? ¿Cuál es la mejor manera?

2661
31 авг. establecido por RaYell el 31 de agosto 2009-08-31 14:58 '09 a las 14:58 2009-08-31 14:58
@ 13 respuestas

return false del controlador de eventos jQuery es en realidad el mismo que la llamada e.stopPropagation y e.stopPropagation en el objeto jQuery.Event pasado .

e.preventDefault() evitará que el evento ocurra de forma predeterminada, e.stopPropagation() evitará que el evento e.stopPropagation() y return false hará ambas cosas. Tenga en cuenta que este comportamiento es diferente de los controladores de eventos ordinarios (no jQuery), en los cuales, en particular, return false no detiene un evento desde burbujas.

Fuente: John Resig

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

2609
31 авг. La respuesta se da karim79 31 ago. 2009-08-31 15:05 '09 a las 15:05 2009-08-31 15:05

En mi experiencia, hay al menos una clara ventaja al usar la función event.preventDefault () con el retorno falso. Supongamos que captura un evento de clic en una etiqueta de enlace, de lo contrario sería un gran problema si el usuario tuviera que ir desde 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 continuará ejecutando el comportamiento predeterminado para las etiquetas de anclaje.

 $('a').click(function (e) { // custom handling here // oops...runtime error...where oh where will the href take me? return false; }); 
border=0

La ventaja de usar event.preventDefault () es que puede agregarlo como la primera línea en el controlador, asegurando así que el comportamiento predeterminado no funcionará de manera predeterminada, independientemente de si no se alcanza la última línea de la función (por ejemplo, .).

 $('a').click(function (e) { e.preventDefault(); // custom handling here // oops...runtime error, but at least the user isn't navigated away. }); 
393
23 янв. Respuesta dada por Jeff Poulton el 23 de enero. 2011-01-23 01:37 '11 a la 1:37 2011-01-23 01:37

Esto no es como lo llamaste, la pregunta es "javascript"; Esta es una pregunta de diseño de jQuery.

jQuery y una cita relacionada previamente de John Resig ( publicación de karim79 ) parece ser una fuente de malentendidos sobre cómo funcionan los manejadores de eventos.

Hecho: un controlador de eventos que devuelve falso evita la acción predeterminada para este evento. Esto no detiene la propagación del evento. Los manejadores de eventos siempre han trabajado de esta manera, comenzando en los viejos tiempos de Netscape Navigator.

La documentación de MDN explica cómo funciona el return false en el 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 diferente.

Para obtener más información, consulte attachEvent en MSDN y W3C DOM 2 Event Documentation .

89
21 июня '10 в 0:31 2010-06-21 00:31 Garrett da la respuesta el 21 de junio de 2010 a las 0:31 2010-06-21 00:31

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

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

NOTA. En el enlace anterior "Combustible de su codificación" durante bastante tiempo, se ha generado el error 5xx. Encontré una copia en el archivo de Internet , la imprimí en formato PDF y la puse en Dropbox: el artículo archivado a return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

>
58
09 апр. La respuesta se da JAAulde 09 abr. 2011-04-09 21:32 '11 a las 21:32 2011-04-09 21:32

Cuando se utiliza jQuery, return false realiza 3 operaciones separadas cuando lo llama:

  • event.preventDefault();
  • event.stopPropagation();
  • Deje de hacer una devolución de llamada y vuelva inmediatamente cuando se le llame.

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

51
19 февр. Respuesta dada por James Drinkard el 19 de febrero. 2013-02-19 18:54 '13 a las 18:54 2013-02-19 18:54

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

38
31 авг. respuesta dada por Eldar Djafarov 31 de agosto 2009-08-31 15:02 '09 a las 15:02 2009-08-31 15:02

Yo pienso

event.preventDefault()

- w3c es el método especificado para cancelar eventos.

Puede leer esto en la especificación W3C para Cancelar Eventos .

Además, no puede utilizar el retorno falso en todas las situaciones. Cuando proporciona la función javascript en el atributo href y devuelve falso, el usuario será redirigido a una página con una cadena falsa.

18
31 авг. la respuesta se da rahul 31 ago. 2009-08-31 15:04 '09 a las 15:04 2009-08-31 15:04

Creo que la mejor manera de hacer esto es usar event.preventDefault() porque si hay una event.preventDefault() en el controlador event.preventDefault() , entonces se omitirá la declaración false regresa y el comportamiento será el contrario a lo que quieres.

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

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

 $('a').click(function (e) { try{ your code here......... } catch(e){} return false; }); 
13
09 марта '13 в 22:27 2013-03-09 22:27 la respuesta la da Naga Srinu Kapusetti el 9 de marzo de 2013 a las 22:27 2013-03-09 22:27

La diferencia entre preventDefault () y devuelve falso como sigue:

preventDefault () : simplemente detiene el comportamiento predeterminado del navegador.

devuelve falso : hace 3 objetos separados cuando lo llamas:

  • Detiene el comportamiento predeterminado de los navegadores.
  • Esto evita que el evento DOM se propague.
  • Deje de hacer una devolución de llamada y vuelva inmediatamente cuando se le llame.

Usos de acuerdo a sus requerimientos:

1) Si solo desea deshabilitar el comportamiento predeterminado del navegador, use la función preventDefault ().

2) Si desea evitar el comportamiento predeterminado del navegador y evitar que el evento DOM se propague, use return false.

0
02 дек. respuesta dada por GSB 02 dic. 2017-12-02 22:18 '17 a las 10:18 pm 2017-12-02 22:18

Básicamente, así es como se combinan las cosas, porque jQuery es una estructura que se enfoca principalmente en los elementos HTML, en su mayoría evitando el defecto, pero al mismo tiempo deja de propagarse a la burbuja.

Por lo tanto, simplemente podemos decir que devolver falso en jQuery es igual a:

devolver falso es e.preventDefault y e.stopPropagation

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

Básicamente, antes de utilizar return false; primero entienda qué es e.preventDefault(); y e.stopPropagation(); entonces, si crees que necesitas ambos al mismo tiempo, solo úsalo.

Entonces, básicamente este código está abajo:

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

igual a este código:

 $('div').click(function (event) { event.preventDefault(); event.stopPropagation(); }); 
0
18 июля '18 в 14:07 2018-07-18 14:07 La respuesta es dada por Alireza el 18 de julio de '18 a las 14:07 2018-07-18 14:07

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

Cuando escribes "false", haces lo siguiente detrás de escena.

 * Stops callback execution and returns immediately when called. * event.stopPropagation(); * event.preventDefault(); 
0
09 февр. Respuesta dada por Abdullah Shoaib 09 de febrero. 2018-02-09 11:14 '18 a las 11:14 2018-02-09 11:14

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

 event.preventDefault() 

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

0
29 сент. La respuesta se da Dilip0165 29 sep . 2014-09-29 14:28 '14 a las 14:28 2014-09-29 14:28

e.preventDefault ();

Simplemente detiene la acción por defecto del elemento.

Ejemplo de instancia:

prohíbe que el hipervínculo siga la URL, no permite enviar el botón enviar formulario. Cuando tiene muchos controladores de eventos y solo desea evitar el evento predeterminado debido a esto, y debido a esto muchas veces, para esto necesitamos usarlo en la parte superior de la función ().

Razón: -

Razón para usar e.preventDefault(); radica en el hecho de que en nuestro código, por lo que algo no funciona en el código, le permitirá ejecutar un enlace o formulario para enviar o permitir la ejecución o permitir cualquier acción que necesite realizar. Se enviará link o submit y seguirá permitiendo que el evento continúe.

 <!DOCTYPE html> <html > 
0
27 апр. Respuesta dada por Parth Raval el 27 de abril. 2018-04-27 09:55 '18 a las 9:55 2018-04-27 09:55