Avoid Addeventlistener on Hyperlink

Question

I just start web programmation and i have a problem with addEventListener.

I did a flipcard animation, when you click anywhere in the container, the card flip and show the back where some informations are, including 2 Hyperlinks.

My problem is when i click on those links, the card flip again. So i would like to avoid the card to flip when i click on those 2 links only, but it should still working anywhere else on the container. I have already try StopImmediate propagation and prevetdefault but it does'nt seems to work. Could you help me pls ?

Sorry for my bad english, it's not my native language.

My Js :

 document.getElementById("d2_container").addEventListener('click', function () {
                this.classList.toggle('turnY');
            });

HTML :

 <section id="d2_container">
            <article>
                <img src="img/photo2.png" alt="">
            </article>
            <article>
                <h3 class="coordonnée">Coordonnées</h3>
                <div>
                    <p>Adresse : ########</p>
                    <p>Téléphone : ########</p>
                    <p>Email : <a href="####@outlook.fr">####@outlook.fr</a>
                    </p>
                    <p>Permis B et vehicule.</p>
                    <div>
                    <a href="https://www.lequipe.fr/Football/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                    <a href=""><i class="fab fa-github"></i></a>
                    </div>

                </div>
            </article>
        </section>

Possible duplicate of [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — Ionut Necula, Jan 29 '19 at 10:00

score 1 · Accepted Answer · answered Jan 29 '19 at 09:56

Check to see if the event's target has an <a> ancestor, and if so, don't continue the function:

document.getElementById("d2_container").addEventListener('click', function ({ target }) {
  if (target.closest('a')) {
    return;
  }
  this.classList.toggle('turnY');
});

document.getElementById("d2_container").addEventListener('click', function({ target }) {
  if (target.closest('a')) {
    return;
  }
  this.classList.toggle('turnY');
  console.log('toggled');
});

<section id="d2_container">
  <article>
    <img src="img/photo2.png" alt="">
  </article>
  <article>
    <h3 class="coordonnée">Coordonnées</h3>
    <div>
      <p>Adresse : ########</p>
      <p>Téléphone : ########</p>
      <p>Email : <a href="####@outlook.fr">####@outlook.fr</a>
      </p>
      <p>Permis B et vehicule.</p>
      <div>
        <a href="https://www.lequipe.fr/Football/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
        <a href=""><i class="fab fa-github"></i></a>
      </div>

    </div>
  </article>
</section>

(If your <a>s didn't have any children, you could instead check if target.tagName === 'A')

Avoid Addeventlistener on Hyperlink

1 Answers1