Bonjour à tous,
Je suis désolé si le sujet est récurrent, mais je n'ai pas trouvé mon bonheur dans la FAQ ni dans les précédentes discussions. Mon domaine est surtout le C et le C++. Je commence à avoir pas mal l'habitude de XHtml/CSS mais je ne programme en Javascript qu'occasionnellement, donc je suis toujours newbie dans le domaine.
J'ai fait une table qui contient un certain nombre de cellules qui, chacune, contiennent exactement une <input type="checkbox"> et un <label> associé. Quand on clique sur le label, l'événement est transmis en standard à la checkbox qui l'accompagne.
Code Terminal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 +--------------+--------------+--------------+-------------- | [x] label | [x] label | [x] label | [x] label | +--------------+--------------+--------------+-------------- | [x] label | [x] label | [x] label | [x] label | +--------------+--------------+--------------+-------------- | [x] label | [x] label | [x] label | [x] label | +--------------+--------------+--------------+-------------- | [x] label | [x] label | [x] label | [x] label | +--------------+--------------+--------------+--------------
Pour le confort de l'utilisateur, j'aimerais qu'un clic sur la cellule entière provoque le même résultat mais je suis confronté à la propagation des événements (capture + bubbling). Donc, si je capture un clic sur une cellule, je ne sais pas à l'avance s'il a eu lieu sur la cellule elle-même, ou s'il a été reçu par un de ses enfants et qu'il est remonté jusqu'à la cellule par bubbling. Et bien sûr, si je déclenche un click() de la checkbox depuis le handler de ma cellule, l'événement va également se propager vers le haut, être reçu par ma cellule et déclencher un second clic.
J'ai essayé les trois approches suivantes :
J'ai réussi à bloquer le bubbling avec
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <td id="cell0" onclick="mycb();"><input type="checkbox" name="memberUid" id="xxxx0" checked="checked" /><label id="label0" for="xxxx0">xxxx0</label></td> <script>document.getElementById('xxxx0').addEventListener ('click',mycb,false);</script> <script>document.getElementById('xxxx0' ).onclick = mycb;</script>
Ça fonctionne Mais cela m'oblige à placer ce handler à chaque fois sur les trois éléments : la cellule, la case à cocher et l'étiquette. Et ce pour toutes les cellules de ma table !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 function mycb (e) { e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); };
Existe-t-il un moyen de faire plus propre ? Et surtout, peut-on mettre le handler une fois pour toutes sur la table, par exemple, et identifier l'objet cliqué ?
J'utilise Firefox 3. Ce serait bien si le code pouvait marcher partout mais à défaut, je vise surtout un code qui respecte les normes et qui fonctionne correctement sur ce navigateur.
Merci à tous !
Partager