Éléments dynamiques, éléments statiques, gestionnaires d’événements et leurs complexités

Travailler avec des éléments empilés sur une page, certains qui sont des ancres et d’autres qui sont des éléments avec des gestionnaires d’événements peut parfois provoquer un comportement étrange.

En fin de compte, tout cela a à voir avec la propagation des événements, mais si vous n’avez pas eu à gérer cela (ou le bouillonnement d’événements ou quelque chose comme ça), cela peut être un peu difficile.

Et voici un exemple: Que se passe-t-il si vous avez une image enveloppée dans une ancre. Que se passe-t-il lorsque vous placez un élément dynamique via JavaScript après le chargement de la page qui charge un autre élément dynamique ? En plus de cela, vous souhaitez empêcher la page de rediriger lorsque l’élément dynamique est cliqué mais toujours directe lorsque l’image est cliquée ?

Cela peut sembler simple – et dans certains cas, c’est le cas – mais si vous avez un élément transparent recouvrant l’intégralité de l’image originale, cela peut devenir un tout autre défi.

C’est là que la compréhension des cibles d’événements entre en jeu. Mais avant d’expliquer comment le résoudre, je vais essayer de tout résumer en une explication plus simple et de schématiser comment il est rendu dans le DOM.

Éléments dynamiques, éléments statiques et gestionnaires d’événements

Alors essayez d’imaginer ceci : vous avez…

• Une page qui a une image et l’image est enveloppée dans une ancre qui vous mènera, par exemple, à une autre page.
• Lorsque la page se charge, deux éléments dynamiques sont créés. Lorsque le premier est cliqué, il devrait afficher le deuxième élément dynamique.
• Lorsque la première dynamique est cliquée, elle ne doit pas rediriger la page.
• Lorsque l’on clique sur l’image d’origine, elle doit se comporter comme prévu.

La partie la plus difficile est que les éléments dynamiques sont placés au-dessus de la combinaison existante d’ancre et d’image.

Un regard sur le DOM

Cela signifie que le DOM ressemblerait à ceci :

Notez dans l’image ci-dessus que l’ ancre déclenche l’ image et que l’ élément dynamique déclenche la superposition dynamique.

Alors, comment faire pour afficher le deuxième élément dynamique lorsque le premier a cliqué sans quitter la page ? Vous pouvez le faire en examinant la cible de l’événement qui a été déclenché.

Le code de gestion des événements

J’utiliserai jQuery ci-dessous car la plupart de mes lecteurs travaillent avec WordPress et WordPress est livré avec jQuery, mais cela peut également être géré avec du JavaScript vanille (mais essayer de suivre cette voie est plus que ce que je suis prêt à expliquer dans ce particulier Publier).

Cela dit, voici l’essentiel dont je vais vous expliquer ce qui se passe avec le code :

$('.acme-element').each(function(e) { 
  var $anchor = $(this).parents('a');
  $(this).on('click', function(evt) {
    if(e.target !== this) {
      evt.preventDefault();
    }
    // Here, you may want to action to redirect to an original anchor.
  });
});

Tout d’abord, je fais l’hypothèse qu’il existe plusieurs éléments dynamiques, d’où la raison de chaque itérateur.

Ensuite, il crée une référence à l’ élément d’ ancrage qui est un parent de l’instance actuelle de l’élément dynamique (l’utilisation de var ici est importante pour qu’il se réfère toujours à l’élément qui est le parent de l’instance actuelle de l’itération par rapport à l’écrasement d’une instance précédente ).

Lorsque l’élément est cliqué, nous configurons un gestionnaire de clic afin que nous puissions jeter un œil à la cible de l’événement de l’événement click. C’est là que ça devient un peu déroutant.

Nous avons des variables e et evt qui font chacune référence au gestionnaire d’événements pour un élément spécifique. Dans le code ci-dessus :

• e fait référence à l’événement lié à notre élément dynamique,
• evt fait référence à l’élément mais affectera également le processus de propagation des événements, ce qui signifie qu’il déclenchera des événements dans le reste du DOM.

Et ainsi, dans notre conditionnel, nous évaluons la cible du premier gestionnaire d’événements pour nous assurer qu’il ne correspond pas à l’élément spécifique. À partir de là, comme vous pouvez le voir dans le commentaire du code, vous pouvez déterminer comment vous voulez procéder (comme peut-être aller de l’avant et le laisser naviguer ailleurs ou faire autre chose).

En fin de compte, c’est votre décision. Mais lorsque vous entrez dans une liaison d’éléments dynamiques, d’éléments statiques et de gestionnaires d’événements, cela peut rapidement devenir compliqué.