2011-07-22 33 views
6

yo estaba tratando de configurar esta "cuando hace clic fuera del elemento, cerrarla" tipo de cosas usando un código que encontré en Stackoverflow:¿alguien puede explicar cómo funciona este stopPropagation?

$(document).click(function() { 
$('.list-to-hide').hide(); 
}); 

$('.show-list-button').click(function(event) { 
event.stopPropagation(); 
}); 

Podría alguien explicar la parte posterior con stopPropagation? No entiendo por qué es necesario.

Gracias! Matt

Respuesta

32

Imagínese esto:

<div> 
    DIV 
    <span> 
     Span 
    </span> 
<div> 

y:

$('div').click(function() { alert('div clicked'); }); 
$('span').click(function() { alert('span clicked'); }); 

Check out what happens when you click each one

Al hacer clic en el lapso, pasa a desencadenar también el div porque tu también hacer clic en el div.

Ahora si queríamos alertar al lapso única tenemos que dejar el div clic desde el disparo si se hace clic en el lapso para que haga lo siguiente:

$('div').click(function() { alert('div clicked'); }); 
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); }); 

See what happens now

+0

¡Es una demostración realmente agradable y fácil de entender! ¡De mucha ayuda! – Kumar

1

¿Has leído esto?

http://api.jquery.com/event.stopPropagation/

Previene el caso de burbujeando el árbol DOM, evitando cualquier controlador de matrices de recibir la notificación del evento.

Ejemplo

Mata al burbujeo en el evento click.

$("p").click(function(event){ 
    event.stopPropagation(); 
    // do something 
}); 
3

event.stopPropagation(); previenen que el evento burbujee el DOM. Sin esta línea, al hacer clic en .show-list-button, también se disparará el controlador de clic para el documento. Con él, el clic del documento no se disparará.

8

Su código de ejemplo le falta una parte vital:

$(document).click(function() { 
    $('.list-to-hide').hide(); 
}); 

$('.show-list-button').click(function(event) { 
    event.stopPropagation(); 
    $('.list-to-hide').show(); 
}); 

Sin la event.stopPropagation(), sería una muestra de la lista, y luego ocultarlo porque el .show-list-button es dentro la $(document) por lo que ambos clic manipuladores dispararían. event.stopPropagation() básicamente dice solo aplique este evento de clic a ESTE NIÑO NODE y no le diga nada a los contenedores principales porque no quiero que reaccionen.

Piénselo de esta manera: alquila un taxi por $ 100. El conductor le da a su compañía $ 80. event.stopPropagation() es como decirle que conserve todos los $ 100 porque la compañía no necesita saber nada sobre el viaje.

+0

bien, eso es una buena explicación, pero digo que hago clic en el botón .show-list. ¿Por qué el navegador no decide pensarlo primero como un clic de documento?¿Hay algún sistema de pesaje que use para decidir qué función notificar sobre el clic primero? – Matt

+0

Para obtener más material, será mejor que vea [Orden de evento] (http://www.quirksmode.org/js/events_order.html) y http://stackoverflow.com/questions/2661199/event-capturing-vs-event -bubbling/2667743 # 2667743 – Ghostoy

+4

+1 para la analogía de los hooker. – Fred

Cuestiones relacionadas