Question

我刚刚开始进行Web编程，而addEventListener却有问题。

我做了一个动画卡片动画，当您单击容器中的任何位置时，动画卡片会翻转并在背面显示一些信息，包括2个超链接。

我的问题是，当我单击这些链接时，卡片再次翻转。因此，当我仅单击那两个链接时，我想避免卡发生翻转，但它仍应在容器上的其他位置工作。我已经尝试过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>没有孩子，则可以检查target.tagName === 'A'）

避免在超链接上使用Addeventlistener

1 个答案: