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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jquery自定义表格样式
Nov 23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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 安全过滤函数代码
2011/05/07 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python 显示数组全部元素的方法
2018/04/19 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
在python里从协程返回一个值的示例
2019/02/19 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python和Sublime整合过程图示
2019/12/25 Python
python实现的Iou与Giou代码
2020/01/18 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
音乐表演专业毕业生求职信
2013/10/14 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
德语专业求职信
2014/03/12 职场文书
保证书范文大全
2014/04/28 职场文书
工作检讨书怎么写
2015/01/23 职场文书
倡议书格式及范文
2015/04/29 职场文书