jQuery实现点击任意位置弹出层外关闭弹出层效果


Posted in Javascript onOctober 19, 2016

在之前做项目的时候经常会在主页面上点击某个按钮,右侧弹出一个div输出对应内容的详细信息。此时,我是希望在鼠标点击弹出层外的时候关闭该弹出层,主要思想就是

找到鼠标点击的那个元素

判断这个元素是否在指定区域内,其实就是判断它的父元素是不是弹出层

如果不是就对弹出层进行hide,如果是就不进行任何操作

具体实现

该代码需要使用jQuery,代码如下:

$(document).mousedown(function(e){
if($(e.target).parent("#info").length==0){
$("#info").hide();
}
})
$(document).mousedown(function(e){})

$(document)就是获取整个网页文档对象,类似于原生的window.ducument

mousedown是鼠标事件,是指当鼠标指针移动到元素上方并按下鼠标按键时,类似的事件还有:

mouseup:当在元素上放松鼠标按钮时

mouseover:当鼠标指针位于元素上方时

$(e.target)

$(e.target)表示获取点击事件的元素。

parent()

$(e.target).parent("#info").length是获取当前点击事件元素带有id为info的父元素。

以上所述是小编给大家介绍的jQuery实现点击任意位置弹出层外关闭弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
vuex实现简易计数器
Oct 27 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
canvas绘制环形进度条
Feb 23 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
小程序实现上下切换位置
Nov 16 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
Angular2  NgModule 模块详解
Oct 19 #Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 #Javascript
jQuery  ready方法实现原理详解
Oct 19 #Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 #Javascript
Javascript typeof与instanceof的区别
Oct 18 #Javascript
javascript self对象使用详解
Oct 18 #Javascript
You might like
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
获取body标签的两种方法
2011/10/13 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
java必学必会之static关键字
2015/12/03 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
javascript实现滚轮轮播图片
2020/12/13 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
公司员工违纪检讨书
2015/05/05 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
用Python实现屏幕截图详解
2022/01/22 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python