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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现聊天对话框
Feb 08 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
Laravel 5 学习笔记
2015/03/06 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python中的随机函数小结
2018/01/27 Python
Python制作exe文件简单流程
2019/01/24 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
组织关系转移介绍信
2014/01/16 职场文书
网络程序员自荐信
2014/01/25 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
安全生产工作汇报
2014/10/28 职场文书
入团介绍人意见范文
2015/06/04 职场文书
2016新年晚会开场白
2015/12/03 职场文书
2016国庆促销广告语
2016/01/28 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js