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 相关文章推荐
二级域名转向类
Nov 09 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Vue分页组件实例代码
Apr 17 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
JS严格模式知识点总结
Feb 27 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python实现的快速排序算法详解
2017/08/01 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python中bisect的用法及示例详解
2020/07/20 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
法人代表任命书范本
2014/06/05 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
小学班主任评语
2014/12/29 职场文书
租赁协议书
2015/01/27 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
收入证明怎么写
2015/06/12 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP