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

Question

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

<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>

现在，当您在标题或菜单区域外单击时，我想再次隐藏此菜单。

我试过了

$(document).click(function(event){
    if(event.target.id =="content_wrapper"){
        // hide
    }
});

但是 event.target.id 只返回点击元素的 ID，而不是父元素。我该如何实现？

Answer 1

一种方法是停止在元素内传播点击事件。

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

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

这将阻止事件冒泡超出这些元素。这样，在 #header_wrapper 或 #menu_wrapper(或您的菜单名称)中的任何点击都不会触发文档的处理程序。