javascript - Common date picker conundrum -

i have simple date picker page. calendar lives in iframe inside div. have onfocusout attached div closes div.

the problem when click on calendar, select event calendar never fires because onfocusout fires , div disappears.

how can best handle common date picker workflow? link following similar abstraction blue div represents calendar. when click on blue div don't want red event fire.

https://jsfiddle.net/1ye6yn43/5/

#divouter {   background-color: red;   height: 45vh;  }  #divinner {   background-color: blue;   height: 25vh;   width: 75vh; }   <div id="divouter">   outer   <div id="divinner">     inner   </div> </div>  var blueclick = document.getelementbyid('divinner'); blueclick.onclick = function(event) {   alert('blue');   event.preventdefault();  }  var redclick = document.getelementbyid('divouter'); redclick.onclick = function() {   //alert('red');   redclick.style.visibility = 'hidden'; }  redclick.onfocusout = function() {   alert('red focus out'); } 

add event.stoppropagation(); blue event