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中clone()函数实现表单中增加和减少输入项
May 13 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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执行速度全攻略(上)
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
python匹配两个短语之间的字符实例
2018/12/25 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
keras.layer.input()用法说明
2020/06/16 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
三八红旗手事迹材料
2014/12/26 职场文书
银行稽核岗位职责
2015/04/13 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
德劲DE1105机评
2022/04/05 无线电
tomcat下部署jenkins的方法
2022/05/06 Servers