<body class="body">
    <div class="first">
      first
      <div class="second">
        second
        <div class="third">third</div>
      </div>
    </div>
    <script src="./test.js"></script>
  </body>


.first {
  height: 300px;
  width: 300px;
  background-color: red;
}
.second {
  height: 200px;
  width: 200px;
  background-color: blue;
}
.third {
  height: 100px;
  width: 100px;
  background-color: green;
}

div {
  color: white;
  padding: 20px;
}

const first = document.querySelector('.first');
const second = document.querySelector('.second');
const third = document.querySelector('.third');

first.addEventListener(
  'click',
  (event) => {
    event.stopPropagation();
    alert('first')
  },
  true
);
second.addEventListener('click', () => {
  alert('second')
});
third.addEventListener('click', () => {
  alert('third')
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.