Clickable link within a clickable div, that voids parents's click event

Question

Is there a way to have a clickable div with a nested <a>, that doesn't execute the click event on the div when the <a> tag is clicked?

Looking for a vanilla JS solution

const div = document.querySelector('div');
div.addEventListener('click', e => {
  this.console.log('clicked the div');
});

div {
  width: 300px;
  border: 2px solid green;
  padding: 1em;
}

<div> 
<p>This is a button</p>
<a href="/" target="_blank">Link to somewhere else</a>
</div>

Does this answer your question? [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — Thibaut, Dec 16 '21 at 13:59
@Thibaut Yes this helps, when I add a clickevent on the nested tag, that executes `e.stopPropagation()` on the ``, it works the way I was looking for — Saro Verhees, Dec 16 '21 at 14:04

score 2 · Accepted Answer · answered Dec 16 '21 at 13:59

You can check what element was the target of the event.

const div = document.querySelector('div');
div.addEventListener('click', e => {
  if(!e.target.matches('a'))
    console.log('clicked the div');
});

div {
  width: 300px;
  border: 2px solid green;
  padding: 1em;
}

<div> 
<p>This is a button</p>
<a href="/" target="_blank">Link to somewhere else</a>
</div>

1 Answers1