javascript - Jquery toggle div，允许点击div外部关闭，也允许点击div内部的所有内容

Question

我在一个 div 上有一个切换事件，我已经看到很多关于我的问题，但似乎没有什么能解决我正在尝试做的事情，它要么让我的 div 在几秒钟内消失，要么就是没有工作。这是我的 jsfiddle .

我有一个 div 需要在另一个 <div> 时切换被点击。切换的 div 中有需要填写的输入，以及其中的提交按钮。所以我需要允许在 div 内部单击，但只能在我的 div 内部单击。所以我希望 div 显示，除非用户单击此 div 之外。

我正在使用这个可以很好切换的查询:

$('#MyDiv').click(function (event) {
  $("#ToggledDiv").slideToggle();
});

然后这个代码在 div 之外单击时隐藏它不起作用:

$(window).click(function () {
  $("ToggledDiv").hide();
});

我已经尝试过使用 e.preventDefault() 的解决方案；但这不起作用，或者 $(document).click，甚至 mousedown 但它不会按照我想要的方式流动，它会在几秒钟内隐藏它，或者它会阻止切换甚至工作所以我'我迷路了。

Answer 1

此行为背后的原因是 Event Bubbling and Capturing HTML DOM API。

你可以使用event.stopPropagation()或 event.cancelBubble = true 以防止事件冒泡到 DOM 树，从而防止任何父处理程序收到事件通知。

另一篇好文章:events order

$('#MyDiv').click(function(event) {
  $("#ToggledDiv").show();

  disabledEventPropagation(event);
  //console.log('2nd event');

});

$('#ToggledDiv').click(function(event) {

  disabledEventPropagation(event);
  //console.log('3rd event');

});


$(document).click(function() {
  $("#ToggledDiv").hide();
  //console.log('1st event');

});


function disabledEventPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else if (window.event) {
    window.event.cancelBubble = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="MyDiv" style="background-color:yellow">
  click me to open
</div>


<div id="ToggledDiv" style="display: none;background-color:yellow">
  <input type="text" />
  <input type="submit" />
</div>