SOURCE

var innerCircle = document.getElementById("inner");
innerCircle.onclick = function() {
  alert("innerCircle");
};
var middleCircle = document.getElementById("middle");
middleCircle.onclick = function() {
  alert("middleCircle");
}
var outerCircle = document.getElementById("outer");
outerCircle.onclick = function() {
  alert("outerCircle");
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      click me!
    </div>
  </div>
</div>

 #outer {
   position: absolute;
   width: 400px;
   height: 400px;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   background-color: deeppink;
 }
 
 #middle {
   position: absolute;
   width: 300px;
   height: 300px;
   top: 50%;
   left: 50%;
   margin-left: -150px;
   margin-top: -150px;
   background-color: deepskyblue;
 }
 
 #inner {
   position: absolute;
   width: 100px;
   height: 100px;
   top: 50%;
   left: 50%;
   margin-left: -50px;
   margin-top: -50px;
   ;
   background-color: darkgreen;
   text-align: center;
   line-height: 100px;
   color: white;
 }
 
 #outer,
 #middle,
 #inner {
   border-radius: 100%;
 }