共同日期选择器难题

时间:2016-02-06 02:43:35

标签: javascript

我有一个简单的日期选择页面。我的日历位于div内的iframe中。我有一个onfocusout附加到关闭div的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');
}

enter image description here

1 个答案:

答案 0 :(得分:1)

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