Question

感谢SO帖子，我终于可以通过点击它之外的任何地方来关闭div。我的问题是我要关闭的div包含带复选框的附加div。我希望能够在不关闭div的情况下单击复选框。有谁知道最有效的方法吗？我认为小提琴演示了问题http://jsfiddle.net/s72q85fm/任何帮助都非常感激。

＆＃13;

$(function() {

  $("#startbutton").click(function(e) {

    if ($('#MainContainer').is(":visible")) {
      $('#MainContainer').fadeOut(200);
    } else {
      e.preventDefault();
      $("#MainContainer").fadeIn(200, function() {
        $(this).focus();
      });
    }
  });

  $("#MainContainer").on('blur', function() {
    $(this).fadeOut(200);
  });
});

＆＃13;

#MainContainer {
  width: 200px;
  height: 200px;
  background: green;
  color: #FFFFFF;
  display: none;
  position: absolute;
  left: -30px;
}
#CheckboxContainer {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 60px;
  margin-top: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Universe">
  <button id='startbutton'>Open Box</button>
  <div id="MainContainer" tabindex="-1">
    <div id="CheckboxContainer">
      <label>
        <input type="checkbox" id="myRegion" />
      </label>
      <label>
        <input type="checkbox" id="myCountry" />
      </label>
    </div>"
  </div>
</div>

＆＃13;

Answer 1

在模糊监听器内检查事件的e.relatedTarget.type，如果是复选框则不要模糊，如果是复选框，也会将焦点恢复为MainContainer而不是模糊（请参阅下面代码的else块）

更新：

我们还需要检查null的{{1}}值，因为在外部点击时它将为空。

e.relatedTarget

＆＃13;

$("#MainContainer").on('blur', function(e) {
    if(!(e.relatedTarget!=null&&
          e.relatedTarget.type=='checkbox'))  $(this).fadeOut(200);
    else $(this).focus();
});

＆＃13;

$(function() {

  $("#startbutton").click(function(e) {

    if ($('#MainContainer').is(":visible")) {
      $('#MainContainer').fadeOut(200);
    } else {
      e.preventDefault();
      $("#MainContainer").fadeIn(200, function() {
        $(this).focus();
      });
    }
  });

   $("#MainContainer").on('blur', function(e) {
    if(!(e.relatedTarget!=null&&e.relatedTarget.type=='checkbox'))
    			$(this).fadeOut(200);
    else{$(this).focus();} 
  });

});

＆＃13;

#MainContainer {
  width: 200px;
  height: 200px;
  background: green;
  color: #FFFFFF;
  display: none;
  position: absolute;
  left: -30px;
}
#CheckboxContainer {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 60px;
  margin-top: 50px;
}

＆＃13;

当点击外部时，如何停止关闭其div的停止复选框

1 个答案: