JSFiddle - React, Tailwind, and code Playground

HTML

<div id="el1" class="x">
  <div id="el2" class="x">
    <div id="el3" class="x">
      <div id="el4" class="x"></div>
    </div>
  </div>
</div>

CSS

.x{border-radius:250px;position: absolute;background-color:#CCC;border:1px solid #666;top: 24px; left: 24px;}
#el1{height: 200px;width: 200px;}
#el2{height: 150px;width: 150px;}
#el3{height: 100px;width: 100px;}
#el4{height: 50px;width: 50px;}

JavaScript

// first snippet i can't use return false	
  function init(){
		var elements = document.getElementsByClassName('x')
		for(var i=0; i<elements.length; i++) {
		  elements[i].addEventListener('click',function(e){
			this.style.backgroundColor='red'
			alert("clik");
              e.stopPropagation();
			 /*return false*/
		  },false)
		   /* return false*/
		}
	}
	document.addEventListener('DOMContentLoaded',init,false);