Currently, I have implemented a click event listener on my anchor elements. However, the anchors contain a span element within them, and the event listener does not function properly if you click on the span inside 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>I am looking for a solution to modify my event listener so that it triggers the anchor click regardless of where on the anchor you click.