jQuery点击父元素关闭子元素

Question

jQuery点击父元素关闭子元素

6

我希望当用户点击pop_up时才关闭窗口（而不是点击div的内容）。例如，点击背景层会隐藏div。在下面的代码中，我不希望当用户点击div内容时关闭#pop_up，而仅在“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>

- Tomislav Tomi Nikolic

你可以参考这篇文章：https://dev59.com/M3E85IYBdhLWcg3wikEu - Vignesh T.V.

4个回答

3

您可以使用click事件的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（而不是其中的元素）。

更多信息：

- Aminadav Glickshtein

2

没错，就是这个。我之前也试过类似的东西，现在我知道我哪里出了问题了！谢谢老兄！非常感激！ - Tomislav Tomi Nikolic

2

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

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

- Scott Weaver

由于某种原因，它在我的情况下是相反的，比如如果您点击弹出内容，它将关闭弹出窗口，而当您点击弹出窗口时，它不会执行任何操作。 - Tomislav Tomi Nikolic

1

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>

不要取消事件冒泡！：停止事件传播的危险，
仅在没有其他方法时使用它。

如果您计划使用jQuery 3.x，请不要使用andSelf()，因为自v1.8起已被弃用，并将在jQuery v3中删除。

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

如果您使用jQuery 1.8 <，请改用addBack。

- Legends

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FabioCosta · Accepted Answer

你所经历的是事件冒泡和捕获的行为。查看这个答案：什么是事件冒泡和捕获？。最简单的方法是将onClick附加到子元素并停止冒泡。

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