jQuery ~ Deux événements de clic superposés?

Question

J'ai un élément conteneur dire

<div id="myContainer"> 
    <form action="" method="post"> 
    Radio: <input type="radio" name="myRadio" id="myRadio" value="1" /> 
    </form> 
</div> 

Donc, si j'attribue un événement de clic au $('#myContainer') et aussi un événement de clic pour $('#myRadio') est-il un moyen de les amener à la fois au feu? Actuellement, parce qu'il y a un événement click "au-dessus" de l'élément de formulaire, qui a un return false pour arrêter le saut de page, je ne peux pas cliquer sur le bouton radio.

Existe-t-il un moyen d'y remédier? Ou dois-je être plus précis dans mes sélecteurs? Ou même $('#myContainer:not("#myRadio")')? (est-ce encore valide?)

Answer 1

Pour arrêter le saut de page, utilisez event.preventDefault() au lieu de return false;, ce qui interrompt actuellement l'événement.

Le comportement naturel est pour the event to bubble, donc tout ce que vous devez faire pour obtenir les deux gestionnaires de tir ne sont pas interférer avec la bulle via return false :)

Answer 2

Vous pouvez faire ce qui suit!

$('#myContainer, #myRadio').click(function(event){ 

    event.stopPropagation(); //This will stop the bubble so it only fires once per element 
    switch(event.srcElement) 
    { 
     case 'HTMLFormElement': 
      //The Div/Form 
     break; 
     case 'HTMLInputElement': 
      //The input itself 
     break; 
    } 
    return false; 
})​ 

Exemple Here, vous devrez ajouter des alertes