Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<body>
<style>
div {
  padding:50px;
  background-color:rgba(255, 0, 0, 0.2);
  text-align:center;
  cursor:pointer;
}
</style>
<h1>The cancelBubble Property</h1>
<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
  <div onclick="func1(event)">DIV 1</div>
</div>
Cancel bubble:
<input type="checkbox" id="check">
<p></p>
<p>Because DIV 1 is inside Div 2, both DIVs get clicked when you click on DIV 1.</p>
<p>Check the cancel bubble checkbox, and try again.</p>
<p>The cancelBubble = true prevents the event flow from bubbling up to parent elements.</p>
<script>
function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.cancelBubble = true;
  }
}
function func2() {
  alert("DIV 2");
}
</script>
</body>
</html>