[Vanilla JavaScript][jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target

05/04/2019 / admin

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Mise à jour: 09/12/2021

Nouvelle source avec deux solutions proposées (la 1ère fonctionne, je l’ai testée): Codepen: CodePen Home
Event delegation with SVGs and closest() et Codepen: CodePen Home
Event Delegation with an SVG.

<button class="click-me">
	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 800 800" aria-describedby="menu-title">
		<title id="menu-title">User Menu</title>
		<path fill="currentColor" d="M725 0H75C33.75 0 0 33.75 0 75v450c0 41.25 33.75 75 75 75h125v200l240-200h285c41.25 0 75-33.75 75-75V75c0-41.25-33.75-75-75-75zM400 100.258c55.086 0 99.742 44.656 99.742 99.742S455.086 299.742 400 299.742 300.258 255.086 300.258 200s44.656-99.742 99.742-99.742zM550 500H250v-50c0-55.231 44.772-100 100-100h100c55.231 0 100 44.769 100 100v50z"/>
	</svg>
</button>

</svg>

</button>

document.addEventListener('click', function (event) {
	if (!event.target.closest('.click-me')) return;
	console.log(event.target);
}, false);

document.addEventListener('click', function (event) {

if (!event.target.closest('.click-me')) return;

console.log(event.target);

}, false);

Sources:

Description du problème

J’ai le markup HTML suivant:

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

</div id="c4">

</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é.

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

$('#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é

 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

$('#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.

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

</td>

[...]

</tr>

  /*
   * 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

* 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

[javaScript] Un accordéon avec l’attribut HTML onClick

20/12/2018 / admin

Problème: les composants Accordéon de Bootstrap et Foundation font lagguer l’affichage sur des pages longues (lorsqu’ils sont initialisés trop de fois).

Solution: ne pas les utiliser, mais préférer une petite fonction « ouvrir/fermer » qui s’active via un onClick="$(this).<ma_fonction>();" placé sur l’élément qui déclanche l’ouverture/fermeture.

<script type="text/javascript">
  $.fn.openRow = function() {
    var $this = $(this);
    var $class = $this.attr('class');

    if ($this.attr('aria-expanded') == 'false') {
      $this.attr('aria-expanded', true);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', true);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', true);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');
    }

    else {
      $this.attr('aria-expanded', false);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', false);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', false);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');
    }
  };
</script>

$.fn.openRow = function() {

var $this = $(this);

var $class = $this.attr('class');

if ($this.attr('aria-expanded') == 'false') {

$this.attr('aria-expanded', true);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', true);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', true);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');

}

else {

$this.attr('aria-expanded', false);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', false);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', false);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');

}

};

</script>

<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

1	<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

12/06/2015 / admin

A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen.

jQuery(document).ready(function(){
    // http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/
    jQuery('.radio-boxes-group').on('click', '.radio-box', function(){
        var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name');

        jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked');
        jQuery(this).find('input:radio')[0].checked = true;

        if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {
            jQuery(this).toggleClass('is-checked');
        } else {
            // do nothing ...
        }
    });
});

jQuery(document).ready(function(){

// http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/

jQuery('.radio-boxes-group').on('click', '.radio-box', function(){

var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name');

jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked');

jQuery(this).find('input:radio')[0].checked = true;

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {

jQuery(this).toggleClass('is-checked');

} else {

// do nothing ...

}

});

<!-- 1er groupement de boutons radio -->
<div class="radio-boxes-group">
    <div class="row">
        <div class="six columns payment-mode">
            <div class="radio-box is-checked">
                <input type="radio" id="monthly_payment" name="payment_mode" value="" checked="checked" />
                <div class="information">
                    <label for="monthly_payment">Par mois</label>
                    <p class="complementary-information">15€/mois</p>
                </div>
            </div>
        </div>
        <div class="six columns payment-mode">
            <div class="radio-box">
                <input type="radio" id="yearly_payment" name="payment_mode" value="" />
                <div class="information">
                    <label for="yearly_payment">En une fois</label>
                    <p class="complementary-information">180€ pour 1 an</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 2ème groupement de boutons radio -->
<div class="radio-boxes-group">
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box is-checked">
                <input type="radio" id="cb_method" name="payment_method" value="" checked="checked" />
                <div class="information">
                    <label for="cb_method">Prélèvement CB</label>
                    <p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box">
                <input type="radio" id="cheque_method" name="payment_method" value="" />
                <div class="information">
                    <label for="cheque_method">Par chèque</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box">
                <input type="radio" id="sepa_method" name="payment_method" value="" />
                <div class="information">
                    <label for="sepa_method">Prélèvement SEPA (RIB)</label>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

</div>

<label for="cb_method">Prélèvement CB</label>

<p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>

</div>

<label for="cheque_method">Par chèque</label>

</div>

<label for="sepa_method">Prélèvement SEPA (RIB)</label>

</div>

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

<div class="radio-box">
    <input onclick="[...]" />
</div>

</div>

Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box, compte pour un clic sur le champ radio ou checkbox dont il est le parent.

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {
    jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input.
    jQuery(this).toggleClass('is-checked');
} else {
    // do nothing ...
}

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {

jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input.

jQuery(this).toggleClass('is-checked');

} else {

// do nothing ...

}

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Étiquette : onclick

[Vanilla JavaScript][jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Description du problème

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é

Cas plus complexe où la fonction est déclenchée via un attribut `onClick` dans la source HTML…

[javaScript] Un accordéon avec l’attribut HTML onClick

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Description du problème

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é

Cas plus complexe où la fonction est déclenchée via un attribut onClick dans la source HTML…

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen

Cas plus complexe où la fonction est déclenchée via un attribut `onClick` dans la source HTML…

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen