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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
js实现多图左右切换功能
Aug 04 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
js中的闭包实例展示
Nov 01 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
JS实现音量控制拖动
Jan 15 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
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之第二天
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python简单实现基数排序算法
2015/05/16 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
将python代码和注释分离的方法
2018/04/21 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
教育专业自荐书范文
2013/12/17 职场文书
政工例会汇报材料
2014/08/26 职场文书
小学生学习保证书
2015/02/26 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android