Jquery关闭父点击

Question

我希望窗口仅在pop_up单击时关闭(而不是单击div内容).例如,单击背景图层会隐藏div.在下面的代码中,我不希望它#pop_up仅在"pop_up"上单击div内容bot时关闭.

我怎样才能做到这一点？

$("#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

您所经历的是事件的冒泡和捕获行为.检查此答案什么是事件冒泡和捕获？.

简单的方法是将onClick附加到孩子并停止冒泡.

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

Answer 2

您可以使用event单击的参数，并查看单击是否在另一个元素内部（或者是元素本身）

JSFiddle：https://jsfiddle.net/32mz2x3x/1/

$("#pop_up").click(function(event) {
      if ($(event.target).parents().andSelf().is('#pop_up_content')) {
        return 
    }
    $("#pop_up").hide();
});

我曾经parents检查过您单击的位置是否在pop_up_content元素内部，我使用它andSelf是因为也许您单击#pop_up_content（而不是在元素内部）

更多信息：

• jQueryandSelf函数
• jQueryis函数
• jQueryparents函数
• jQueryevent对象