Question

I have a header on my website, the header has a “button” that has a Icon and also some text.
When you click this “button” it will show or hide an extra menue on the page by toggeling the visibility of a class.

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

Now I want to hide this menue again, when you click outside the header or menue area.

I tried

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

But event.target.id returns the ID of the clicket element only, not the parent.
How do I accomplish this?

Answer 1

One approach is to stop propagation of the click event within the element.

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

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

This will stop event bubbling beyond these elements. In this way, any click within #header_wrapper or #menu_wrapper (or whatever your menu is called) will not trigger the document’s handler.