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>
