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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
node内置调试方法总结
Feb 22 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
详解JS数组方法
Nov 20 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获取服务器信息的实现代码
2013/02/04 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
建龙钢铁面试总结
2014/04/15 面试题
班主任工作年限证明
2014/01/12 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
法人身份证明书
2014/10/08 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
教师岗位职责
2015/02/03 职场文书
工程服务质量承诺书
2015/04/29 职场文书
房产电话营销开场白
2015/05/29 职场文书
社会实践单位意见
2015/06/05 职场文书