Stop Capturing

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Stop Capturing</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
        <h3>Click `outer3` to see capturing flow</h3>
    <div id="outer1">
        outer1
        <div id="outer2">
            outer2
            <div id="outer3">
                outer3
            </div>
        </div>
    </div>
  
  <br/>
  <input type="radio" name="capture" value="capture" checked=""> Use Capturing
  <input type="radio" name="capture" value="stop"> Stop Propagation
  
  <script src="script.js"></script>
  </body>

</html>

(function(doc){
    'use strict';
  
    var useCapturing = true;
    
    doc.getElementById('outer1').addEventListener('click', function(e){
        alert('outer1 clicked');
        if(useCapturing){
            return;
        }
        e.stopPropagation();
    }, true);
  
    doc.getElementById('outer2').addEventListener('click', function(){
        alert('outer2 clicked');
    }, true);
  
    doc.getElementById('outer3').addEventListener('click', function(e){
        alert('outer3 clicked');
    }, true);
  
    
    doc.getElementsByName('capture')[0].addEventListener('change', function(){
        useCapturing = true;
    }, false);
  
    doc.getElementsByName('capture')[1].addEventListener('change', function(){
        useCapturing = false;
    }, false);
 
  
}(document));

html, body{
  width: 100%;
}

#outer1{
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: red;
  color: #fff;
  position: relative;
  text-align: center;
}

#outer2{
  top: 50%;
  position: absolute;
  margin-top: -75px;
  margin-left: 75px;
  width: 150px;
  height: 150px;
  background-color: blue;
}

#outer3{
  top: 50%;
  left: 0;
  position: absolute;
  margin-top: -25px;
  margin-left: 50px;
  width: 50px;
  height: 50px;
  background-color: yellow;
  color: #000;
}