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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
js date 格式化
Feb 15 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python验证码识别的示例代码
2017/09/21 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
养生餐厅创业计划书范文
2014/03/26 职场文书
出生公证委托书
2014/04/03 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python