javascript - event - jquery methods

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 "evento de clic", la devolución falsa o la invocación de event.preventDefault () hace una diferencia, en la cual

la diferencia es que preventDefault solo evitará que ocurra la acción de evento predeterminada, es decir, una página redirigida en un clic de enlace, un envío de formulario, etc. y la devolución falsa también detendrá el flujo de eventos.

¿Eso significa que si el evento click se registra varias veces para varias acciones, usando

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

¿devolver falso detendrá la ejecución de los otros controladores?

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 interrupción ... 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

Usando la animación animada de jQuery (), si el elemento al que se hace clic es "<a href="#" ...> </a>", ¿la función aún debe devolver falsa?

y

Cuál es la diferencia entre e.preventDefault (); y devuelve falso?

Answer 1

A veces, un oyente de un evento desea cancelar los efectos secundarios del evento en los que está interesado. Imagina un cuadro de texto en el que solo deseas 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 2

Escribir return false o e.preventDefault() no impedirá que otros controladores se ejecuten.

Por el contrario, 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 completamente a su pregunta, pero el otro día usé e.preventDefault() YUI en un elemento <a> para aplastar la acción href , ya que solo quería que el evento onclick JavaScript tuviera control (a menos que no se detectara JS). . En esta situación, detener toda la cadena de eventos no me afectaría.

Pero un par de días antes, tenía un <input type="checkbox"> anidado dentro de un elemento <label> , y tuve que usar un condicional en el controlador de eventos para determinar si el objetivo cliqueado era una etiqueta, ya que ni e.preventDefault() ni e.stopEvent() impidieron que mi evento de ''clic'' se disparara ( legítimamente ) dos veces (excepto en IE6).

Lo que hubiera sido agradable es la capacidad de aplastar una cadena completa 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 habría manejado mi situación de doble evento, si alguien está interesado en comentar sobre eso.

Answer 4

espera que este código pueda explicárselo ...

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

manifestación

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 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 agregado usando addEventListener() (navegadores no IE) . En este caso, use el preventDefault() del objeto Event . Se seguirán llamando a otros controladores para el evento.

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

2. Un controlador de eventos agregado usando attachEvent() (IE) . En este caso, establezca la propiedad window.event 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 agregado utilizando un atributo o propiedad de controlador de eventos .

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

o

button.onclick = handleEvent;

En este caso, return false hará el trabajo. Se attachEvent() cualquier otro controlador de eventos agregado mediante addEventListener() o attachEvent() .

function handleEvent() {
    return false;
}