How to close element when click is made everywhere except on opened element?

Question

I'm trying to make panel that opens when it's clicked on the button. I have the button, I have the panel. With click() event it does open. When that button is pressed again, it does close.

$('#button').click(function() {

    $('#panel').toggle();
});

I want to achieve that if user clicks everywhere except on #button or #panel, it does close too.

P.S. I tried something like this, but it's not the wanted behavior.

$('#button').mouseenter(function() {

    $('#panel').show();

}).mouseleave(function() {

    setTimeout(function() {
        $('#panel').hide();
    }, 2000);
});

Answer 1

$(
    function(){
        $("#button").click( function(){ $("#panel").toggle(); } );
        $(document).click( function(e){
            var elm = jQuery(e.target);
            if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return;
            $("#panel").hide();
        });
    }
);

Example

Checks to make sure that the element that was clicked [e.target] is not

1. The button elm.is("#button")
2. The panel elm.is("#panel")
3. Any element in the panel elm.parents("#panel").length>0

Answer 2

Try this

$('#button').click(function(e) {

    $('#panel').toggle();
    e.stopPropagation();

});

$('#panel').click(function(e) {

    e.stopPropagation();

});

$(document.body).click(function(e) {
    if($('#panel').is(":visible")){
      $('#panel').hide();
    }
});