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判断ie版本号的简单实现代码
Mar 05 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
TypeScript入门-接口
Mar 30 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
javascript天然的迭代器
2010/10/29 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python实现端口检测的方法
2018/07/24 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
通过cmd进入python的步骤
2020/06/16 Python
Python同时处理多个异常的方法
2020/07/28 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
软件项目开发计划书
2014/05/01 职场文书
文化大革命观后感
2015/06/17 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android