jQuery: Handling background/container cliquez sur

Question

J'ai un gros div, et un petit bouton à l'intérieur de la div.

Lorsque le div est cliqué, je veux qu'il fasse quelque chose.
Lorsque le bouton est cliqué, je veux qu'il fasse quelque chose d'autre.

$('#myDiv').click(OnDivClicked); 
$('#myButton').click(OnButtonClicked); 

Actuellement lorsque le bouton est cliqué, les deux OnDivClicked et OnButtonClicked sont tirés.

Comment empêcher OnDivClicked d'être renvoyé lorsque le bouton est cliqué?

Merci d'avance.

Answer 1

Vous devez empêcher le clic de bulles à l'aide event.stopPropagation(), comme ceci:

$('#myButton').click(function(e) { 
    OnButtonClicked(); 
    e.stopPropagation(); 
}); 

Par défaut beaucoup bulle d'événement à leurs parents tout le chemin à la racine DOM, ce qui leur gestionnaires d'événements pour le même événement tapez pour tirer ... pour arrêter cela, vous avez juste besoin d'arrêter le comportement de bouillonnement comme le code ci-dessus. Si vous n'avez pas besoin que l'action par défaut se produise, return false; l'accomplira également.

La différence entre e.StopPopagation() et return false; serait plus important en dire un point d'ancrage, arrêter la bulle ne serait pas feu gestionnaire click du parent mais serait le lien, alors que return false ferait ni.