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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
微信小程序实现购物车功能
Nov 18 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Fabric 应用案例
2016/08/28 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python脚本实现验证码识别
2018/06/07 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python对文件的操作方法汇总
2020/02/28 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
大学信息公开实施方案
2014/03/09 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
写给父母的感谢信
2015/01/22 职场文书
公积金具结保证书
2015/05/11 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技