js 如何判断鼠标点在指定区域外

如图，我写了一个提示框，点击左边的图标会出来提示框，怎样能够实现鼠标点击提示框以外的区域，提示框消失？

document添加click事件，判断点击的对象不是你的弹出层隐藏

    $(document).click(function (e) {
        var pop=$('#你的弹出层ID')[0];
        if (e.target!= pop &&!$.contains(pop, e.target)) pop.style.display='none'
    })

用focus()事件和blur()事件

楼上正解，我补充一下blur()是你鼠标移开某个元素发生。
比如 《div id='a' onblur="disappear()"》 假设 这个div就是你的提示框 ，你只要在disappear（）函数里 写上 $("#a").hide()应该就可以了

<script>
    $(function(){
        $(document).on("click",function(e){
            if((window.event.srcElement.tagName) != "DIV"){
                $(".div1").hide()
            }
        })
    })
</script>

onclick() 事件与 onblur()

$('#left').bind('click',function(){
$('#tip').show();
});

$('#left').bind('blur',function(){
$('#tip').hide();
})

mouseout，鼠标移除事件

你点击提示框以外相当于此控件失去焦点。你可以使用js中的onblur（）函数来进行失焦后的隐藏操作。使用jquery框架会很方便实现这一功能

自定义写个块放在那，具体内容在填充再显示，效果一样，系统自带提示改起来复杂要死