Frecuentes
Visto 872,516 veces
3065
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?
14 Respuestas
2882
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 false
sí no evitar que el evento burbujee.
Fuente: Juan Resig
Respondido el 09 de Septiembre de 16 a las 16:09
438
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
106
Esta no es, como la ha titulado, una pregunta de "JavaScript"; es una pregunta sobre el diseño de jQuery.
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.
contestado el 23 de mayo de 17 a las 13:05
69
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
59
Al usar jQuery, return false
está haciendo 3 cosas separadas cuando lo llamas:
event.preventDefault();
event.stopPropagation();
- 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
45
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
21
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
16
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
1
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
1
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
1
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
1
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
1
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
0
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