JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div class = "outer">
  <div class = "inner">
  </div>
</div>

CSS

.outer, .inner{
  position: absolute;
}

.outer {
  width: 200px;
  height: 200px;
  background: yellow;
}

.inner {
  width: 100px;
  height: 100px;
  left: 40px;
  bottom: 40px;
  background: red;
}

JavaScript

// Demonstrates how stopPropogation works 

// ---mousedown---> Red-box - X(event stops)
//
// never fires Yellow boxes event handler because its on bubble phase

(function(window){

var logger = (e) => console.log(e)

var outerDomNode = document.querySelector(".outer")
var innerDomNode = document.querySelector(".inner")	

outerDomNode.addEventListener("mousedown", function(e){
	console.log('outer')
 })
 
innerDomNode.addEventListener("mousedown", function(e){
	console.log('capture inner')
  e.stopPropagation()
 }, true)


})(window)