[POO] Cellules cliquables associées à une checkbox

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:

---

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 :

Code:

---

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>

---

J'ai réussi à bloquer le bubbling avec

Code:

---

1 2 3 4 5

function mycb (e) { e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); };

---

Ç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 !

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 !

Bonjour,

Citation:

---

Envoyé par Obsidian

Existe-t-il un moyen de faire plus propre ?

---

ne serait-il pas plus simple d'en rester au fonctionnement du <label> ?

Code:

---

<td id="cell0"><input type="checkbox" name="memberUid" id="xxxx0" checked="checked" onclick="mycb();"/><label id="label0" for="xxxx0">xxxx0</label></td>

---

En appliquant des styles permettant au label d'occuper toute la cellule. Par ex.

Code:

---

style="height:100%;width:100%;margin:0px;"

---

(et peut-être un padding:0px; sur le <td>)

A+

Malheureusement non, parce que ça ne marche pas. Les labels sont inline et les déclarer en « display: block » n'aide pas beaucoup non plus.

En plus, je cherche à priori à ne coller une fonction que sur la balise <td>, pour pouvoir simuler un clic sur la checkbox, je n'ai pas besoin d'avoir une fonction s'exécutant lorsque celle-ci est cochée, mais je ne lui en ai collé une que pour bloquer la propagation de l'événement vers le haut.

Et puis maintenant que je suis dedans, je trouve que la solution de ce problème aurait un intérêt général :-)

Code:

---

1 2 3 4 5 6 7

table.groups td label { height: 100%; width: 100%; margin: 0px; background-color: green }

---

Bon, j'ai fini par trouver : l'objet event passé au handler contient notamment un champ target qui référence l'objet sollicité (donc, ici, cliqué) et reste le même au fur et à mesure que l'événement se propage. C'est que je cherchais. Après cela, il suffit de mettre le handler sur <td> uniquement, et laisser se propager normalement le tout. Il suffit donc de comparer target à this pour voir si c'est bien à la cellule que l'on s'adressait.

Seul « ennui » : ça ne marche pas avec « onclick » parce que this n'est pas défini dans ce cas. Il faut donc faire une boucle pour faire un addEventListener() sur toutes les cellules. Mais qu'importe. Maintenant, je vais essayer de faire de même en ne mettant l'écouteur que sur un seul objet - la table - et voir si je peux quand même me débrouiller pour que l'événement soit quand même destiné à la cellule.

Merci quand même.