Élément jQuery dans une zone div et cliquant

Question

J'ai un grand DIV appelé #bigDiv. Dans cette div j'ai d'autres éléments comme des menus et des images.

Je veux que jQuery bascule le #bigDiv chaque fois que l'utilisateur clique sur le #bigDiv PAS d'autres éléments (qui sont des parties de cette div). Comment faire ça?

Par exemple:

index.html:

<div id="bigDiv"> 
<ul> 
<li><a href="site">Site</a></li> 
</ul> 

jQuery:

$("#bigDiv").click(
function{ 
$("#bigDiv').toggle(); 
}); 

$("li").click(
function{ 
//do something here 
}); 

A ce stade, lorsque je clique sur li elemnt il ferme toujours la principale div. J'ai essayé avec z-index, mais cela ne fonctionne pas puisque l'élément est toujours un enfant de la division principale.

Merci.

Answer 1

Vous pouvez empêcher l'événement de bouillonnement, à l'aide stopPropagation():

EMPÊCHE le bouillonnement de l'événement dans l'arborescence DOM, ce qui empêche les gestionnaires de parents d'être informé de l'événement.

$("li").click(function(event){ 
    event.stopPropagation(); 
    //do something here 
}); 

Sinon, vous pouvez tester quel élément est cliqué dans le gestionnaire d'événements de bigDiv:

$("#bigDiv").click(function(event){ 
    var tar; 
    if (event.target) targ = event.target; 
    else if (event.srcElement) targ = event.srcElement; 
    if (targ.nodeType == 3) // defeat Safari bug 
     targ = targ.parentNode; 

    if(targ.id == 'bigDiv') 
     $("#bigDiv').toggle(); 
}); 

Aussi la lecture vaut: quirksmode - Introduction to Events et quirksmode - Event properties