Edit in JSFiddle

$(document).on('click', function(evt){
    if( !$(evt.target).closest('.hoge').length ){
        alert('.hoge以外のとこがclickされたよ');
    }
});

<div class="hoge"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="hoge">
    <div class="foo">
        <div class="bar"></div>
    </div>
</div>
<div class="bar">
    <div class="foo">
        <div class="hoge"></div>
    </div>
</div>

[class] {
    margin: 10px;
    padding: 10px;    
}
[class]:before {
    content: "."attr(class);
}

.hoge {background: #eee;}
.foo {background: #ddd;}
.bar {background: #ccc;}