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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
js+css实现导航效果实例
Feb 10 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
vue自定义指令directive的使用方法
Apr 07 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文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
简单了解python协程的相关知识
2019/08/31 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python2与Python3的区别详解
2020/02/09 Python
python实现滑雪游戏
2020/02/22 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
银行进社区活动总结
2014/07/07 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
Redis高并发缓存架构性能优化
2022/05/15 Redis