jQuery - cliquez sur parent est hérité des enfants

Question

ma situation est:

<div class="overlay"> 
<div class="modal"></div> 
</div> 

maintenant je veux que cliquer sur plaqueras cache à la fois .overlay et .modal divs, donc:

$('.overlay').on('click',function(){ 
$(this+',.modal').hide(); 
}); 

et cela fonctionne, mais il y a un problème, si je clique sur .modal il fait la même chose, et je ne veux pas, je dois dire à jquery pour cacher les divs seulement si je clique sur .overlay et pas si je clique sur .modal

Comment puis-je faire? Il semble que l'événement attaché à .overlay soit hérité des enfants.

grâce à des conseils

Ici JSFIDDLE

Answer 1

Essayez cette démo plz: http://jsfiddle.net/bcGZ3/3/

API:

• .stopPropagation - http://api.jquery.com/event.stopPropagation/
• .preventDefaulthttp://api.jquery.com/event.preventDefault/

Tout ce que vous voulez est d'arrêter popogation du clic jusqu'à la div enfant et apis Jquery abpve vous aidera à faire atteindre cet objectif. BTW votre échantillon jsfiddle est vide.

Espérons qu'il correspond à la nécessité, :)

Exemple de code

$('.overlay').on('click',function(){ 
     $(this).hide(); 
    alert("Parent div click function called."); 
}); 


$(".modal").click(function(e) { 
    // click on this link will cause ONLY child alert to fire 
    e.stopPropagation(); 
    // stop default action of link 
    e.preventDefault(); 
    alert("Well-behaved child link click ONLY.\n\nAnd, Enjoy."); 
}); 

Answer 2

Essayez ceci:

$('.overlay').on('click',function(evt){ 
    if(!$(evt.currentTarget).is('.modal')){ 
     $('.overlay, .modal').hide(); 
    } 
});