Jquery 单击文档时获取事件的父div

我在我的网站上有一个标题，标题有一个“按钮”，上面有一个图标和一些文本。 当您单击此“按钮”时，它将通过切换类的可见性在页面上显示或隐藏额外的菜单

<div id="header_wrapper">
    <div id="header_area">
        <a class="noSelect" href="#">
            <div id="favuorites_header_wrapper" class="header_item">
                <div id="favuorites_header_font" class="noSelect">Open Menue</div>
                <div id="favuorites_header_icon" class="noSelect"></div>
            </div>
        </a>   
    </div>
    <div id="hidden_favuorite_area_wrapper">
        <div id="hidden_favuorite_area">Your personal area</div>
    </div>
</div>
<div id="content_wrapper">foo</div>

但是event.target.id只返回clicket元素的id，而不返回父元素的id。 我如何做到这一点？

您可以这样做：

  if ($(event.target).is('#content_wrapper *')) {
    // click somewhere inside content wrapper
  }

为了安全起见，您可能需要检查包装本身：

  if ($(event.target).closest('#content_wrapper').length) {
    // click in the wrapper, or on the wrapper itself
  }

---

您可以在单击按钮时绑定事件，并在单击不在标题内的内容时解除绑定

.parent（）函数接受一个选择器。这样可以检查一个元素是否在另一个元素内

$(function() {
    // The selector of the button that gets pressed
    $('#favuorites_header_font').on('click', function() {

        // Insert your [toggle to visible] code here

        $(document.body).on('click.hidemenu', function(event) {
            // Check if the clicked element is outside the header
            if( $(event.target).parent('#header_area').length === 0 ) {
                // Its outside, unbind the (namespaced, to not destroy other code) event.
                $(document.body).off('click.hidemenu');


                // And insert your [toggle to hidden] code here
            }
        });
    });
});

---

一种方法是停止元素中单击事件的传播

$(document).click(function(event){
  // hide
});

$("#header_wrapper, #menu_wrapper").click(function(e){
    e.stopPropagation();
});

这将停止超出这些元素的事件冒泡。这样，在

#标题(u wrapper

或

#菜单(u wrapper

)内的任何单击（或您的菜单被称为什么）都不会触发文档的处理程序。

尝试使用此方法

$(document).click(function(event){
 el=event.target.id;
 if($("#"+el).parent().get(0).id=="content_wrapper"){
   //hide
}

});

---

可以显示更多代码吗。除HTML5之外的高度无效的html-请改用spans。是否要

$（'#myElement'）。单击（函数（）{alert（$（this）.parent（）.attr（'id'）；}）？不幸的是，什么也没有发生。当您单击标题或按钮时，这仍然会传播。我的结构有问题吗？根据您的html，当单击标题区域或按钮（在标题区域中）时，这不会传播到文档级别。它将只传播到它将被停止的包装器。显然，我的结构有问题，因为$（'content_wrapper'）。单击（function（）{alert（）}）；行不通也许您可以在JSFIDLE或jsbin上创建一个演示。你似乎有更大的问题。我解决了这个问题，你的代码运行良好。非常感谢你！
$(document).click(function(event){
 el=event.target.id;
 if($("#"+el).parent().get(0).id=="content_wrapper"){
   //hide
}

});