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 异步操作之动态添加节点功能
May 24 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现简单三级联动效果
Sep 05 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
JS delegate与live浅析
2013/12/21 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python实现视频分帧效果
2019/05/31 Python
在django中自定义字段Field详解
2019/12/03 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
自我鉴定范文200字
2013/10/02 职场文书
村委会主任先进事迹
2014/01/15 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
化学教学随笔感言
2014/02/19 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书