如何让锚点元素的click事件监听器对其子元素也生效？

问题原因 #

你的代码通过e.target.classList.contains('external-link')判断触发元素，但点击<span>时，e.target指向的是<span>而非父级<a>，而<span>没有external-link类，导致条件不满足，事件逻辑无法执行。

解决方案 #

方案1：使用closest()方法（推荐事件委托场景）

利用Element.closest()方法从点击元素向上查找最近的匹配选择器的元素（包含自身），修改后的JavaScript代码如下：

document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('.external-link');
  if (targetLink) {
    e.preventDefault();
    console.log('button clicked');
  }
});

不管点击的是<a>本身还是它的子元素<span>，closest()都会找到带external-link类的<a>元素，从而触发事件逻辑。这种方式适合页面后续会动态添加同类锚点的场景。

方案2：直接给锚点元素绑定事件

如果页面中的锚点是静态的（不会动态新增），可以直接给每个external-link元素绑定点击事件：

document.querySelectorAll('.external-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('button clicked');
  });
});

由于事件冒泡机制，点击子元素<span>时，事件会向上冒泡到父级<a>元素，触发绑定的监听器。

内容的提问来源于stack exchange，提问作者user13286