Edit in JSFiddle

document.getElementById('outer').addEventListener("click", (e) => {checkCall1(e.target)});

document.getElementById('inner').addEventListener("click", (e) => {checkCall2(e.target)});

const checkCall1 = (target) => {
	alert("OUTER DIV")
}

const checkCall2 = (target) => {
alert("INNER DIV")
if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

<div id="outer"> OUTER DIV
  <div id="inner">INNER DIV</div>
</div>

Stop propagation:
<input type="checkbox" id="check">

#outer {
  padding: 50px;
  background-color: lightblue;
  text-align: center;
  cursor: pointer;
}
#inner {
  padding: 50px;
  background-color: lightyellow;
  text-align: center;
  cursor: pointer;
}