JSFiddle - React, Tailwind, and code Playground

by cwtuan

HTML

<a href="http://goo.gl/YSXKal" target="_blank">- More Informaion -</a>
<h3>Please open Chrome console and click element3</h3>
<div class="element1">element1
    <div class="element2">element2
        <div class="element3">element3</div>
    </div>     
</div>

CSS

.element1 {
  background-color: #b0c4de;
  height: 160px;
  width: 400px;
  cursor: pointer;
}

.element2 {
  background-color: pink;
  height: 80px;
  width: 300px;
  position: relative;
  top: 20px;
  left: 50px;

}

.element3 {
  background-color: lightgreen;
  height: 30px;
  width: 200px;
  position: relative;
  top: 10px;
  left: 50px;
}

JavaScript

var element1 = document.getElementsByClassName('element1')[0],
     element2 = document.getElementsByClassName('element2')[0],
     element3 = document.getElementsByClassName('element3')[0],
     foo = function(e) { console.log(this.className); },
     stop = function(e) { 
         console.log('stop', this.className); 
         e.stopPropagation();
     };

 element1.addEventListener('click', foo); // bubbling
 element1.addEventListener('click', foo, true); // caputring
 // You cab change handler to "stop"
 element2.addEventListener('click', foo); 
 element2.addEventListener('click', foo, true);
 element3.addEventListener('click', foo);
 element3.addEventListener('click', foo, true);