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 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
创建与框架无关的JavaScript插件
Dec 01 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 escape URL编码
2008/12/10 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
python实现基本进制转换的方法
2015/07/11 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python遍历小写英文字母的方法
2019/01/02 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
学习Python爬虫的几点建议
2020/08/05 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
大学生军训广播稿
2014/01/24 职场文书
高三体育教学反思
2014/01/29 职场文书
社区八一活动方案
2014/02/03 职场文书
记帐员岗位责任制
2014/02/08 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
横空出世观后感
2015/06/09 职场文书
盲山观后感
2015/06/11 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python