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下申明对象的几种方法小结
Oct 02 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
js实现音乐播放控制条
Sep 09 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php对数组排序的简单实例
2013/12/25 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP二维数组去重算法
2016/12/17 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中的高级数据结构详解
2015/03/27 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
自荐信模版
2013/10/24 职场文书
医务人员自我评价
2014/01/26 职场文书
初中学生操行评语
2014/12/26 职场文书
美丽心灵观后感
2015/06/01 职场文书