Click Outside Element

by Kyle Mitofsky

HTML

<div id="menuscontainer">
    Clicks: <span id="inside">0</span>
</div>
<div>
    Clicks: <span id="outside">0</span>
</div>











<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a>
    <br/>Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3.0 Skeleton</a>
    <br/>
    <div>

CSS

body {
    background-color: #FFFFEC;
    padding:10px;
}
#menuscontainer {
    width: 200px;
    height: 200px;
    background-color: #A8CEFF;
}

JavaScript

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
        var self = this;
        $(document).click(function (e) {
            if (!$(e.target).closest(self).length) {
                callback.call(self, e)
            }
        })
    });
};


$("#menuscontainer").clickOutsideThisElement(function () {
  $('#outside').html(parseInt($('#outside').html(), 10)+1)
}).click(function () {
  $('#inside').html(parseInt($('#inside').html(), 10)+1)
});