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 function对象那些迷惑分析
Oct 24 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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目录导航文件代码
2006/10/09 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
python妹子图简单爬虫实例
2015/07/07 Python
python学习之编写查询ip程序
2016/02/27 Python
详细介绍Python的鸭子类型
2016/09/12 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
django云端留言板实例详解
2019/07/22 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
params有什么用
2016/03/01 面试题
退休教师追悼词
2015/06/23 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
MySQL详细讲解变量variables的用法
2022/06/21 MySQL