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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
深入理解python中的闭包和装饰器
2016/06/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
浅析Python 多行匹配模式
2020/07/24 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Linux常见面试题
2013/03/18 面试题
教师绩效工资方案
2014/02/01 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle