javascript - Jquery 关闭父点击

Question

我希望窗口仅在单击 pop_up 时关闭(而不是单击 div 内容)。例如。单击背景层隐藏 div。在下面的代码中，我不希望它在仅在“pop_up”上单击 div 内容机器人时关闭 #pop_up。

我该怎么做？

$("#pop_up").click(function() {
    $("#pop_up").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop_up">
  <div id="pop_up_content">
    <h1> world </h1>
  </div>
</div>

Answer 1

您正在经历的是事件的冒泡和捕获行为。 检查这个答案What is event bubbling and capturing? .

最简单的方法是将 onClick 附加到子项并停止冒泡。

$("#pop_up_content").click(function(ev) {
   ev.preventDefault()
   ev.stopImmediatePropagation() // best to use to stop other event listeners from being called
});