对于一个div1，想要在点击div1的父元素 或者body元素的时候，使div1隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div{
width:300px;
height:300px;
position:absolute;
top:50px;
left:100px;
background:#00BCF3;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
</div>
<script>
$(".div").click(function(e){
console.log("1");
if( !$( e.target ).closest(".div1").length ){
$(".div1").hide();
}
});
</script>
</body>
</html>如果想要在body元素上点击隐藏，就把class=div给删掉，$(".div")改成body就可以了；
说一下原理，想在div1之外的地方隐藏他们，在外面点，就相当于在div或者body上面点击，只需要在div上绑定一个click事件，这时就要判断是在div1内还是div1外，
e.target代表我们点击的元素，closest防范判断e.target本身和父辈元素中，是不是div1元素，也就是判断是不是在div1内点击；