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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
PHP Google的translate API代码
2008/12/10 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
python实现人机五子棋
2020/03/25 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
详解pandas赋值失败问题解决
2020/11/29 Python
幼儿园毕业园长感言
2014/02/24 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
高中班主任评语
2014/12/30 职场文书
社区服务活动报告
2015/02/05 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2015大学生求职信范文
2015/03/20 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server