How to fades out a div when clicking anywhere outside the div

<div id="box"></div>
    <script type="text/javascript">
        (function () {
            var isFocus = false;
            $('#box').on('mouseenter', function () {
                isFocus = true;
            }).on('mouseleave', function () {
                isFocus = false;
            });
            $(document).click(function () {
                if (!isFocus) $('#box').hide();
            });
        })();
    </script>