Have click event listener on anchor element apply to children of the anchor as well

Question

I am using a click event listener on my anchors, but the anchors also have a span inside of them and the event listener doesn't work if you click on the span within the anchor.

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('external-link')) {
    e.preventDefault();
    console.log('button clicked');
  }
});

a {
  background: blue;
  color: white;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 40px;
  font-weight: bold;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

a span {
  display: block;
  width: 100%;
  font-weight: normal;
  font-style: italic;
}

<a href="#" class="external-link">Click Me <span>(External)</span>

How can I adjust my event listener so it triggers the anchor click no matter where on the anchor you click?

Answer 1

The target is what you clicked on so when you click on a click of the anchor, it is the child, not the anchor. The event is not triggered for every element up the chain.

So you need to walk the chain and check for the element. You can do that with closest()

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

a {
  background: blue;
  color: white;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 40px;
  font-weight: bold;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

a span {
  display: block;
  width: 100%;
  font-weight: normal;
  font-style: italic;
}

<a href="#" class="external-link">Click Me <span>(External)</span>