ARTICLE AD BOX
On our landing page we have 'cards' that mention a specific category, along with some specific programs within that category. The goal is to separate clicks on the panel itself from click on the destinations (see image below).
Clicks on the overall card, as well as the category headline will trigger a pop up overlay. Clicks on the destinations will navigate to that destinations webpage.
How does one assign an eventlistener to the image that ignores clicks on the other links overlayed on top of it? (I haven't assigned ID or CLASS for the JS to target until I figure out how to do this).
<div class="card"> <div class="dark"> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"> <header><h2 class="title3">South Pacific Bike Tours</h2></header> </a> <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>, <a href="https://pedalers.travel/samoa-bicycle-tour-samoa-cycling.htm">Samoa</a>, <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a> </div> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"><img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia" title="island bicycling tours around the Pacific"></a> </div>
3,1065 gold badges32 silver badges40 bronze badges
5
Use event delegation + stopPropagation()
Attach the click handler to the card, and prevent it from firing when inner links are clicked
smth like this:
const card = document.querySelector('.card'); card && card.addEventListener('click', (e) => { if (e.target.closest('a')) return; // Do smth });or
document.querySelectorAll('.card a').forEach(link => { link.addEventListener('click', (e) => { e.stopPropagation(); }); });
2 Comments
"and prevent it from firing when inner links are clicked, smth like this: [...]" - that won't work, the header, h2 and img elements all have a "closest" a wrapped around them.
2026-04-24T06:52:45Z+00:00
How does it differentiate between the <a href> attached to the image (image fills the card) from the <a href> attached to the page links?
2026-04-24T06:56:51.187Z+00:00
Explore related questions
See similar questions with these tags.
