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 Event学习第九章 鼠标事件
Feb 08 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 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
Zerg兵种介绍
2020/03/14 星际争霸
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
自制PHP框架之设计模式
2017/05/07 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
php格式文件打开的四种方法
2018/02/24 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
初学Javascript的一些总结
2008/11/03 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
vue跨域解决方法
2017/10/15 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
python插入排序算法实例分析
2015/07/03 Python
python多线程分块读取文件
2019/08/29 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
党支部工作总结2015
2015/04/01 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js