js点击空白处隐藏div

js点击空白处隐藏div

使用前端框架的时候发现很多框架都一个这个功能，就是点击空白处隐藏div。这个功能的制作主要难题就是，如何判断点击的内容是否是空白内容。也可以直接看最后一步，直接把最后一步的所有代码复制到新建的html文件，保存后运行即可看到效果。

判断点击空白处的内容代码:

var divTop = $('.top'); // 设置目标区域

if(!divTop.is(e.target) && divTop.has(e.target).length === 0){

divTop.hide();//隐藏div

}

新建一个html页面，然后在这个html页面设置一个div，并对这个div设置一些样式。如图

html代码：

点击div块不会触发事件，只有点击div块外的内容才会触发

css代码：

引入jquery库，判断鼠标点击的区域是否是空白区域。如图：

引入jQuery库代码：

点击页面的jquery代码：

保存html代码，使用浏览器打开，点击div外的范围即可看到效果。如图

所有代码。可以直接复制所有代码到新建的html页面，保存后运行即可看到效果。注意：如果引入的jquery和案例中的文件路径不一样，需要修改引入的jquery库，否则看不到效果。

所有代码：

点击div块不会触发事件，只有点击div块外的内容才会触发