Question

我想要一个窗口仅在单击pop_up时关闭（而不是单击div内容）。例如。单击背景图层会隐藏div。在下面的代码中，我不希望它仅在“pop_up”上单击div内容bot时关闭#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
});

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（而不是在其中）

更多信息：

Answer 3

使用允许过滤器选择器的表单，并结合:not()：

$("#pop_up").on('click', ':not(#pop_up_content)', function (e) {
    $("#pop_up").hide();
});

Answer 4

JSBin: http://jsbin.com/hoyizos/edit?html,css,js,output

$("#pop_up").click(function(e) { 
    if ($(event.target).is($("#pop_up"))){   
        $("#pop_up").hide();  
    }     
});

h1{
  margin:50px 50px;
  background-color:red;
  display:inline;
}

#pop_up_content{
  background-color:yellow;
}

#pop_up{
  margin:10px;

  background-color:green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<div id="pop_up">
            <div id="pop_up_content">pop_up_content
                <h1> world </h1>
            </div>
I am the pop_up!
 </div>
</body>
</html>

请勿取消事件冒泡！：The Dangers of Stopping Event Propagation，只有在没有其他方式时才使用它。

如果您打算使用jQuery 3.x，because it is deprecated since v1.8 and will be removed in jQuery v3，请不要使用andSelf()。

注意：此函数已被弃用，现在是别名 .addBack（），应该与jQuery 1.8及更高版本一起使用。

如果你使用jQuery 1.8＆lt;请改用addBack。

Jquery关闭父点击

4 个答案: