¿alguien puede explicar cómo funciona este stopPropagation?

Question

yo estaba tratando de configurar esta "cuando hace clic fuera del elemento, cerrarla" tipo de cosas usando un código que encontré en Stackoverflow:

$(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

Answer 1

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

Answer 2

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

Answer 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á.

Answer 4

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.