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表单验证之密码确认
May 22 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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上传文件及图片到七牛的方法
2018/07/25 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python帮你识破双11的套路
2019/11/11 Python
python自动识别文本编码格式代码
2019/12/26 Python
python十进制转二进制的详解
2020/02/07 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
办理暂住证介绍信
2014/01/11 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
留守儿童工作方案
2014/06/02 职场文书
实验心得体会
2014/09/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
邀请函样本
2015/02/02 职场文书
总经理岗位职责
2015/02/04 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
openstack云计算keystone组件工作介绍
2022/04/20 Servers