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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
深入分析jQuery.one() 函数
Jun 03 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 删除记录实现代码
2009/03/12 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
详解django中Template语言
2020/02/22 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
党员四风剖析材料
2014/08/27 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
承诺书范本大全
2015/05/04 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技