Common date picker conundrum

Question

I have a simple date picker page. My calendar lives in an iframe which is inside a div. I have an onfocusout attached to the div that closes the div.

The problem is when I click on the calendar, the select event for the calendar never fires because the onfocusout fires and the div disappears.

How can I best handle the common date picker workflow? The link following is a similar abstraction where blue div represents the calendar. When I click on the blue div I don't want red event to 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');
}

Answer 1

Add event.stopPropagation(); to your blue event