1、新建一个html页面，然后在这个html页面设置一个div，并对这个div设置一些样式。如图
html代码：
<div class="top" >div块</div>
点击div块不会触发事件，只有点击div块外的内容才会触发
css代码：
<style>
.top{
height:300px;
background-color:#333;
color:#fff;
font-size:30px;
line-height:300px;
text-align:center;
}
</style>
2、引入jquery库，判断鼠标点击的区域是否是空白区域。如图：
引入jQuery库代码：<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
点击页面的jquery代码：
<script>
$(document).click(function(e){
var divTop = $('.top'); // 设置目标区域
if(!divTop.is(e.target) && divTop.has(e.target).length === 0){
alert("点击空白处成功！");
divTop.hide()
}
})
</script>
3、保存html代码，使用浏览器打开，点击晃悦div外的范围即可看到效果。如图
4、所有代码。可以直接复制所有代码到新建的html页面，保存后运行即可看到效果。注意：如果引入的jquery和案例中的文件路径不一样，需要修改引入的jquery库，否则看不到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.top{
height:300px;
background-color:#333;
color:#fff;
font-size:30px;
line-height:300px;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<粒铲script>
$(document).click(function(e){
var divTop = $('.top'); // 设置目标区域
if(!divTop.is(e.target) && divTop.has(e.target).length === 0){
alert("点击空白处成功！");
柱泥败 divTop.hide()
}
})
</script>
</head>
<body>
<div class="top" >div块</div>
点击div块不会触发事件，只有点击div块外的内容才会触发
</body>
</html>
