Ejemplo JSFiddle

¿Hay alguna manera de activar el evento de clic de un div dentro de otro div sin activar el div en el evento de clic de los elementos que lo contienen?

 <style> #div1 { background-color: black; height: 200px; width: 200px; position: relative; } #div2 { background-color: white; height: 50px; width: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div id="div1"> <div id="div2"> </div> </div> <script> const div1 = document.getElementById('div1') const div2 = document.getElementById('div2') div1.onclick = () => { console.log("Div 1") } div2.onclick = () => { console.log("Div 2") } </script>

¿Cómo puedo hacer clic en el div interno sin activar el evento de clic del div externo?