Sources:
- jQuery click event on parent, but finding the child (clicked) element
- event.target sur developer.mozilla.org
- event.target.className sur developer.mozilla.org
Description du problème
J’ai le markup HTML suivant:
1 2 3 4 5 6 7 8 |
<div id="p"> <div id="c1"> <div id="c2"></div> <div id="c3"></div> </div id="c4"> <div id="c5"></div> </div> </div> |
…et je souhaite récupérer l’ID de l’élément enfant qui est cliqué lorsque je clique sur l’ensemble de la zone #p
. Mais c’est systématiquement l’ID #p
qui m’est remonté.
1 2 3 |
$('#p').bind('click', function() { alert($(this).attr('id')); }); |
Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué
1 2 3 |
$('#p').bind('click', function(event) { alert(event.target.id); }); |
Note importante: ne pas tenter de passer this
ou thisobj
à la place de event
en paramètre de la fonction. Le libellé du paramètre est important et doit rester event
à cet endroit là. Plus d’info ici: Difference between this and event.target.
Cas plus complexe où la fonction est déclenchée via un attribut onClick
dans la source HTML…
…et où une classe précise doit être mise à l’écart.
1 2 3 4 5 6 7 8 |
<tr onClick="jQuery(this).toggleAssociatedDetailByClickingRow(event);" ng-repeat-start="(lineIndex, lineData) in supplierData.stockV2" class="product-isContacto product-isLens row-triggersExpandableContent"> <td class="col-item"></td> <td class="col-toggleDetail"> <button class="btn-showChildrenTable"><svg><path /></svg></button> </td> <td class="col-description"></td> [...] </tr> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* * Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée */ $.fn.toggleAssociatedDetailByClickingRow = function(event){ const TARGET = $(event.target); if (TARGET.is('.btn-showChildrenTable, svg, path', '.col-toggleDetail')) { return false; } else { $(this) .children('.col-toggleDetail') .find('.btn-showChildrenTable') .toggleAssociatedDetail(); } } // fin: Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée |