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 相关文章推荐
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
老生常谈js数据类型
Aug 03 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
js实现鼠标跟随运动效果
Aug 02 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
vue实现评价星星功能
2020/06/30 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python with的用法
2014/08/22 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
领导欢送会主持词
2015/07/06 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android