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 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
浅谈PHP的反射API
2017/02/26 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js数组的操作详解
2013/03/27 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
.NET面试问题集
2015/12/08 面试题
任命书格式
2014/06/05 职场文书
集体生日活动方案
2014/08/18 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python