javascript - 常见的日期选择器难题

Question

我有一个简单的日期选择器页面。我的日历位于 div 内的 iframe 中。我在 div 上附加了一个 onfocusout 来关闭 div。

问题是当我单击日历时，日历的选择事件永远不会触发，因为 onfocusout 触发并且 div 消失。

如何最好地处理常见的日期选择器工作流程？下面的链接是类似的抽象，其中蓝色 div 代表日历。 当我点击蓝色 div 时，我不希望触发红色事件。

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

添加event.stopPropagation();参加您的蓝色事件