JSFiddle - React, Tailwind, and code Playground

HTML

<input id="cb" type="checkbox"> StopPropagation;

<div id="x">
  <div id="y">
    
  </div>
</div>

CSS

#x {
  width: 100px;
  height: 100px;
  background: orange;
}

#y {
  width: 50px;
  height: 50px;
  background: red;
}

JavaScript

let _id = (str) => document.getElementById(str);

_id('x').addEventListener('click', function() {
  document.body.insertAdjacentText("beforeEnd", "orange; ");
});

_id('y').addEventListener('click', function(e) {
  if( _id('cb').checked ) {
    e.stopPropagation();
  }
  document.body.insertAdjacentText("beforeEnd", "red; ");
});