jQuery除指定区域外点击任何地方隐藏DIV功能


Posted in jQuery onNovember 13, 2017

具体代码如下所示:

$('body').click(function(e) {
  var target = $(e.target);
  // 如果#overlay或者#btn下面还有子元素,可使用
  // !target.is('#btn *') && !target.is('#overlay *')
  if(!target.is('#btn') && !target.is('#overlay')) {
    if ( $('#overlay').is(':visible') ) { 
      $('#overlay').hide();                          
    }
  }
});

或者

$('body').click(function(e) {
  if(e.target.id != 'btn' && e.target.id != 'overlay')
   if ( $('#overlay').is(':visible') ) {
     $('#overlay').hide();
   }
})

PS:下面在接着看一段代码jquery 点击除本身外其他地方隐藏

$("#test").click(function(e) { 
  e?e.stopPropagation():event.cancelBubble = true; 
}); 
$(document).click(function() { 
  $("#test").fadeOut(); 
<pre name="code" class="html">e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件</pre> }); 
<pre></pre> 
<br> 
<link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0">

总结

以上所述是小编给大家介绍的jQuery除指定区域外点击任何地方隐藏DIV,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
php函数式编程简单示例
2019/08/08 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python matplotlib可视化实例解析
2020/06/01 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
局域网标准
2016/09/10 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
英语专业学生的自我评价
2013/12/30 职场文书
团结演讲稿范文
2014/05/23 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党支部季度考核意见
2015/06/02 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
Pandas数据类型之category的用法
2021/06/28 Python