Plusieurs événements dans les éléments imbriqués

Question

J'essaie de créer un formulaire Web qui contient des cases à cocher, parmi d'autres éléments d'entrée, et je voudrais fournir à l'utilisateur l'option de cocher et décocher les cases lorsque vous cliquez sur la div enveloppante élément.

Voici un exemple du HTML:

<div class="line"> 
    <input type="checkbox" /> 
    <p>No, I don't want more newsletters</p> 
</div> 

assez simple. Maintenant, lorsque l'utilisateur clique sur la case à cocher, il est coché/décoché et l'événement monte en bulle jusqu'à l'élément div.line, ce qui peut changer sa couleur de fond ou quelque chose. Maintenant, comme je l'ai dit, je veux aussi que l'utilisateur puisse manipuler la valeur de la case à cocher en cliquant sur la div. Cela semble assez simple; nous ajoutons simplement un observateur à l'élément div.line, attrapons l'événement et basculons la valeur de la case à cocher. Eh bien, voici le problème: Lorsque vous cliquez sur la case à cocher, sa valeur est basculée. Cependant, comme il réside dans la div, vous cliquez également sur la div, ce qui déclenche son observateur, ce qui à son tour fait basculer la valeur de la case à cocher une fois de plus. Donc vous finissez par où vous avez commencé. Deux basculements se produisent. J'ai déjà détruit mon cerveau à ce sujet, essayant toutes les différentes approches. Evénements personnalisés, drapeaux d'éléments personnalisés ... Il est tout simplement impossible de dire au cours d'une seule exécution de fonction si c'est la case à cocher qui a été cliquée ou si c'était l'élément div qui l'entoure. Mais il doit y avoir un moyen, je ne peux tout simplement pas le voir.

Est-ce que quelqu'un a une idée? J'utilise Prototype, au fait.

Answer 1

utiliser un élément <label> avec un dirigé de manière appropriée for attribute:

<label for="cb"><input type="checkbox" id="cb" /> Click anywhere here</label> 

Demo here.

L'avantage est que le balisage devient sémantiquement agréable. Notez que l'attribut for est techniquement facultatif si vous encapsulez le contrôle cible comme ceci, mais IE < 7 ne le supporte pas (mais fonctionne bien avec cet exemple posté).

Answer 2

Il n'est pas nécessaire de lier un événement à l'élément d'entrée interne. Vous avez juste besoin d'attacher un événement à la div parente et vous devriez être capable de réaliser ce que vous voulez faire. Le comportement est basé sur le mécanisme de bulles d'événements. Lorsque vous cliquez sur la zone de saisie, l'événement est propulsé vers la div externe (par opposition à la capture d'événement - qui passe du parent à ses enfants). Donc, un simple gestionnaire d'événement pour div.line ferait l'affaire pour vous.

$('.line').click(function (evt) { 
    console.log("change color here"); 
    $('input[type="checkbox"]').attr('checked','checked'); 
});