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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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/08/07 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript操作cookie
2017/01/17 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python中的函数用法入门教程
2014/09/02 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
Linux文件系统类型
2012/02/15 面试题
总经理文秘岗位职责
2014/02/03 职场文书
大学生就业策划书范文
2014/04/04 职场文书
环境卫生标语
2014/06/09 职场文书
会计毕业生自荐书
2014/06/12 职场文书
美术学专业求职信
2014/07/23 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
趣味运动会赞词
2015/07/22 职场文书
服务行业标语口号
2015/12/26 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python