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制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 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分页函数
2006/07/08 PHP
PHP中GET变量的使用
2006/10/09 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
js压缩利器
2007/02/20 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书