jQuery niño es la captura de clics, solo quieren Padres

Question

decir que tengo esto:

<div id="outer"> 
<div id="inner"> 
</div> 
</div> 

Las dimensiones de la div exterior son 500x500, y el interior es de 100x100. Estoy tratando de emplear el siguiente:

$('#outer').click(function() { 
    $('#outer').fadeOut(); 
}); 

Pero cuando se hace clic en el área de 100x100 #inner, todavía se desvanece. ¿Cómo prevenir esto?

Answer 1

Mejor no asignar los manejadores de clic para los elementos internos. En la función de clic, compruebe el destino del evento igual a externo. Algo así como

$('#outer').click(function(e) { 
    if (e.target.id === "outer"){ 
     $('#outer').fadeOut(); 
    } 
}); 

Working Demo

Answer 2

captura hace clic en el div interior y evitar que se burbujeo:

$('#inner').click(function(ev) { 
    ev.stopPropagation(); 
}); 

Ésta es, además de su manejador clicker "exterior" por encima.

Answer 3

me di cuenta de que este código funciona mejor, y no depende de saber Identificación del o de la clase de elemento:

$('#outer').click(function(e) { 
    if (e.target === this){ 
     $('#outer').fadeOut(); 
    } 
});