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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery操作css样式
May 15 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 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 分页原理详解
2009/08/21 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
onpropertypchange
2006/07/01 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python 爬取微信文章
2016/01/30 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python去除字符串中的换行符
2017/10/11 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
文案策划求职信
2014/04/14 职场文书
校园环保建议书
2014/05/14 职场文书
计算机专业自荐信
2014/05/24 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
村主任当选感言
2015/08/01 职场文书
2016教师节问候语
2015/11/10 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang