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 replace方法去空格
May 08 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
多文件上传的例子
2006/10/09 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
js实现全选和全不选
2020/07/28 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
windows下安装python paramiko模块的代码
2013/02/10 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python列表的常用操作方法小结
2016/05/21 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python通过format函数格式化显示值
2020/10/17 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
会计应聘求职信范文
2013/12/17 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
罗马假日观后感
2015/06/08 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang