jQuery实现指定区域外单击关闭指定层的方法【经典】


Posted in Javascript onJune 22, 2016

本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法。分享给大家供大家参考,具体如下:

在页面上指定区域外单击,关闭层。常见效果为弹出层外单击,关闭弹出层。今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识。

$(document).mouseup(function(e){
  if($(e.target).parent("#big_map").length==0){
    $("#big_map").hide("fast");
  }
})

上面的jquery代码的意思是:当在页面中释放鼠标按键,触发function函数。找到触发事件的包含着所有匹配元素的唯一父元素的元素集合,判断找到元素的个数。如果等于0,则代表不在指定区域内,关闭指定层。

定义和用法:

e.target:触发了单击事件的元素(DOM对象),不会变化,它永远是直接接受事件的目标DOM元素.
parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合。
length:jQuery 对象中元素的个数。
mouseup事件:
当在元素上放松鼠标按钮时,会发生mouseup事件。
与click事件不同mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
mouseup()方法触发mouseup事件,或规定当发生mouseup事件时运行的函数。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
js简单时间比较的方法
Aug 02 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 #Javascript
Json解析的方法小结
Jun 22 #Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 #Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 #Javascript
JS随机打乱数组的方法小结
Jun 22 #Javascript
JS产生随机数的几个用法详解
Jun 22 #Javascript
js与applet相互调用的方法
Jun 22 #Javascript
You might like
preg_match_all使用心得分享
2014/01/31 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
javascript数组快速打乱重排的方法
2014/01/02 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
webpack3之loader全解析
2017/10/26 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
Python模拟用户登录验证
2017/09/11 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
三年级语文教学反思
2014/02/01 职场文书
授权委托书协议书
2014/10/16 职场文书
单位租房协议范本
2014/12/03 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
市场总监岗位职责
2015/02/11 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript