避免在超链接上添加侦听器

Question

我刚开始网络编程，我对addEventListener有个问题。

我做了一个翻转卡片动画，当你点击容器中的任何地方时，卡片翻转并显示一些信息的背面位置，包括两个超链接。

我的问题是，当我点击这些链接时，卡片再次翻转。所以我想避免当我点击这两个链接时卡片翻转，但它应该仍然可以在容器上的其他任何地方工作。我已经尝试了StopImmediate传播和prevetdefault，但似乎不起作用。你能帮我吗？

很抱歉我的英语不好，它不是我的母语。

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

Answer 1

检查事件的target是否具有<a>祖先，如果有，则不继续该函数：

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>

​

(如果您的<a>s没有任何孩子，您可以改为检查是否为target.tagName === 'A')