Travailler avec des \u00e9l\u00e9ments empil\u00e9s sur une page, certains qui sont des ancres et d’autres qui sont des \u00e9l\u00e9ments avec des gestionnaires d’\u00e9v\u00e9nements peut parfois provoquer un comportement \u00e9trange.<\/p>\n
En fin de compte, tout cela a \u00e0 voir avec la propagation des \u00e9v\u00e9nements, mais si vous n’avez pas eu \u00e0 g\u00e9rer cela (ou le bouillonnement d’\u00e9v\u00e9nements ou quelque chose comme \u00e7a), cela peut \u00eatre un peu difficile.<\/p>\n
Et voici un exemple: Que se passe-t-il si vous avez une image envelopp\u00e9e dans une ancre. Que se passe-t-il lorsque vous placez un \u00e9l\u00e9ment dynamique via JavaScript apr\u00e8s le chargement de la page qui charge un autre \u00e9l\u00e9ment dynamique\u00a0? En plus de cela, vous souhaitez emp\u00eacher la page de rediriger lorsque l’\u00e9l\u00e9ment dynamique est cliqu\u00e9 mais toujours directe lorsque l’image est cliqu\u00e9e\u00a0?<\/p>\n
Cela peut sembler simple – et dans certains cas, c’est le cas – mais si vous avez un \u00e9l\u00e9ment transparent recouvrant l’int\u00e9gralit\u00e9 de l’image originale, cela peut devenir un tout autre d\u00e9fi.<\/p>\n
C’est l\u00e0 que la compr\u00e9hension des cibles d’\u00e9v\u00e9nements entre en jeu. Mais avant d’expliquer comment le r\u00e9soudre, je vais essayer de tout r\u00e9sumer en une explication plus simple et de sch\u00e9matiser comment il est rendu dans le DOM.<\/p>\n
Alors essayez d’imaginer ceci\u00a0: vous avez\u2026<\/p>\n
La partie la plus difficile est que les \u00e9l\u00e9ments dynamiques sont plac\u00e9s au-dessus de la combinaison existante d’ancre et d’image.<\/p>\n
Cela signifie que le DOM ressemblerait \u00e0 ceci\u00a0:<\/p>\n
Notez dans l’image ci-dessus que l’ ancre<\/strong> d\u00e9clenche l’ image<\/strong> et que l’ \u00e9l\u00e9ment dynamique<\/strong> d\u00e9clenche la superposition dynamique<\/strong>.<\/p>\n Alors, comment faire pour afficher le deuxi\u00e8me \u00e9l\u00e9ment dynamique lorsque le premier a cliqu\u00e9 sans quitter la page\u00a0? Vous pouvez le faire en examinant la cible de l’\u00e9v\u00e9nement qui a \u00e9t\u00e9 d\u00e9clench\u00e9.<\/p>\n J’utiliserai jQuery ci-dessous car la plupart de mes lecteurs travaillent avec WordPress et WordPress est livr\u00e9 avec jQuery, mais cela peut \u00e9galement \u00eatre g\u00e9r\u00e9 avec du JavaScript vanille (mais essayer de suivre cette voie est plus que ce que je suis pr\u00eat \u00e0 expliquer dans ce particulier Publier).<\/p>\n Cela dit, voici l’essentiel dont je vais vous expliquer ce qui se passe avec le code\u00a0:<\/a><\/strong><\/p>\n Tout d’abord, je fais l’hypoth\u00e8se qu’il existe plusieurs \u00e9l\u00e9ments dynamiques, d’o\u00f9 la raison de chaque<\/a> it\u00e9rateur.<\/p>\nLe code de gestion des \u00e9v\u00e9nements<\/h3>\n
$('.acme-element').each(function(e) { \n var $anchor = $(this).parents('a');\n $(this).on('click', function(evt) {\n if(e.target !== this) {\n evt.preventDefault();\n }\n \/\/ Here, you may want to action to redirect to an original anchor.\n });\n});<\/code><\/pre>\n