En el manejo de eventos de JavaScript, ¿por qué "return false" o "event.preventDefault()" y "detener el flujo de eventos" harán la diferencia?

Question

Se dice que cuando manejamos un "clic evento", volviendo falsa o llamando event.preventDefault() hace una diferencia, en el que

la diferencia es que preventDefault sólo evitará que el valor por defecto acción de eventos ocurrir, es decir, una página redirigir en un clic de enlace, un envío de formulario, etc. y devolver falso también detendrá el flujo de eventos.

¿Eso significa que, si el evento click se ha registrado varias veces durante varias acciones, utilizando

$('#clickme').click(function() { … }) 

volviendo falsa parará los otros manipuladores de correr?

Ahora estoy en una Mac y solo puedo usar Firefox y Chrome pero no IE, que tiene un modelo de evento diferente, y lo probé en FF y Chrome agregando 3 manejadores, y los 3 manejadores funcionaron sin detenerse ... . Entonces, ¿cuál es la diferencia real, o hay una situación donde "detener el flujo del evento" no es deseable?

esto está relacionado con

Using jQuery's animate(), if the clicked on element is "<a href="#" ...> </a>", the function should still return false?

y

What's the difference between e.preventDefault(); and return false?

Answer 1

esperanzas este código puede explicar a usted ...

html

<div> 
<a href="index.html" class="a1">click me</a> 
<a href="index.html" class="a2">click me</a> 
</div>​ 

jquery

$('div').click(function(){ 
    alert('I am from <div>'); 
}); 

$('a.a1').click(function(){ 
    alert('I am from <a>'); 
    return false; // this will produce one alert 
}); 

$('a.a2').click(function(e){ 
    alert('I am from <a>'); 
    e.preventDefault(); // this will produce two alerts 
});​ 

demo

o

$('div').click(function(){ 
    alert('I am from <div>'); 
}); 

$('a').click(function(){ 
    alert('I am from <a>'); 
}); 

$('a.a1').click(function(){ 
    alert('I am from <a class="a1">'); 
    return false; 
}); 

$('a.a2').click(function(e){ 
    alert('I am from <a class="a2">'); 
    e.preventDefault(); 
});​ 

demo 2

Answer 2

Escribir return false o e.preventDefault() no evitará que otros manipuladores de correr.

Más bien, evitarán la reacción predeterminada del navegador, como navegar a un enlace.

En jQuery, puede escribir e.stopImmediatePropagation() para evitar que otros controladores se ejecuten.

Answer 3

Esto no responde por completo a su pregunta, pero el otro día me usa YUI de e.preventDefault() en un elemento <a> para aplastar la acción href, ya que sólo quería que el evento JavaScript onclick tener el control (a menos que no JS detectado). En esta situación, detener toda la cadena de eventos no me afectaría.

Sin embargo, un par de días antes de eso, tuve una <input type="checkbox"> anidado dentro de un elemento <label>, y tuve que utilizar un condicional en el controlador de eventos para determinar si el objetivo se hace clic era una etiqueta, ya que ni e.preventDefault() ni e.stopEvent() detuvo mi ' haga clic en 'evento desde (legitimately) disparando dos veces (excepto en IE6).

Lo que hubiera sido agradable es la capacidad de aplastar toda una cadena de eventos relacionados, ya que ya probé la propagación y return false ;, pero siempre iba a obtener un segundo evento de fuego gracias a mi elemento de etiqueta.

---

Editar: No me importaría saber cómo jQuery hubiera manejado mi situación de doble caso, si alguien está dispuesto a comentar sobre eso.

Answer 4

En ocasiones, un oyente de un evento desea cancelar los efectos secundarios del evento que le interesa. Imagine un cuadro de texto en el que solo desee números. Debido a que los cuadros de texto pueden aceptar cualquier cosa, es necesario decirle al navegador que ignore los números que no se escriben. Esto se logra escuchando los eventos clave y devolviendo falso si se escribe la clave incorrecta.

Answer 5

return false y preventDefault() están ahí para evitar la acción predeterminada del navegador asociada a un evento (por ejemplo, seguir un enlace cuando se hace clic). Hay una técnica diferente para lograr esto para cada uno de tres escenarios diferentes:

1. Un controlador de eventos añadió usando addEventListener() (navegadores no-IE). En este caso, use el método preventDefault() del objeto Event. Se seguirán llamando a otros controladores para el evento.

function handleEvent(evt) { 
    evt.preventDefault(); 
} 

2. Un controlador de eventos añadió usando attachEvent() (IE). En este caso, establezca la propiedad returnValue de window.event en true. Se seguirán llamando a otros controladores para el evento y también pueden cambiar esta propiedad.

function handleEvent() { 
    window.event.returnValue = false; 
} 

3. Un controlador de eventos añadieron usando un atributo o controlador de eventos propiedad.

<input type="button" value="Do stuff!" onclick="return handleEvent(event)"> 

o

button.onclick = handleEvent; 

En este caso, return false hará el trabajo. Se seguirán llamando a cualquier otro controlador de eventos agregado a través de addEventListener() o attachEvent().

function handleEvent() { 
    return false; 
}