jquery选择父不是子答案

【问题标题】：jquery select parent not childjquery选择父不是子
【发布时间】：2015-07-10 08:11:37
【问题描述】：

我需要选择父 div 而不是子 div，我如何在 jQuery 中执行此操作。基本上我想创建一个简单的登录框，当且仅当我点击父 div 时它才应该隐藏，如果我点击子 div 框不应该隐藏。
下面是代码。

 jQuery(document).ready(function ()
    {
        jQuery("li.login-link").click(function ()
        {
            jQuery("div#login-container").css("display", "block");
        });
        jQuery("div#login-container not:(div#login-box)").click(function ()
        {
            jQuery("div#login-container").css("display", "none");
        });
    });

<div id="login-container"> <!--parent div. Should hide when i click on this div-->
    <div id="login-box"> <!--child div. Should not hide parent when i click on this-->
        
    </div>
</div>

【问题讨论】：

对不起，你是什么意思...因为你有一个 id...用它来选择元素
我的要求是，当我单击 div#login-container 时，它将被隐藏，而不是在子项的单击事件上（#login-box）

标签： javascript jquery html

【解决方案1】：

你可以使用.parent():https://api.jquery.com/parent/

$('div#login-box').parent()

或

$('div#login-box').parent('div#login-container')

编辑

根据您在下面的评论，我认为您已停止传播：https://api.jquery.com/event.stoppropagation/

//hide the box when you click the parent:
$('div#login-container').click(function() { $(this).hide() });

// stop child click bubbling up to parent
$('div#login-box').click(function(e) { 
    e.stopPropagation();
});

【讨论】：

实际上我只想在单击父项（div#login-container）而不是子项（div#login-box）单击事件时隐藏登录容器

【解决方案2】：

检查这个

HTML：

<div id="login-container">
    <div id="login-box">
        Hi
    </div>
</div>

JS：

$("div#login-box").click(function ()
 {
    $(this).parent().css("background-color","red")
     console.log()
 });

【讨论】：

【解决方案3】：

试试

jQuery(function($) {
  $("#login-container").click(function(e) {
    if (!$(e.target).closest('#login-box').length) {
      $("div#login-container").hide();
    }
  });
});

#login-container {
  border: 1px solid red;
  padding: 20px;
  min-height: 100px;
}
#login-box {
  border: 1px solid green;
  padding: 20px;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="login-container">
  <div id="login-box">

  </div>
</div>

【讨论】：