¿Hay alguna manera de tener un div en el que se pueda hacer clic con un <a> anidado, que no ejecute el evento de clic en el div cuando se hace clic en la etiqueta <a> ?
Buscando una solución vainilla JS
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>Puede verificar qué elemento fue el objetivo del evento.
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>