jQuery实现点击任意位置弹出层外关闭弹出层效果
更新时间：2016年10月19日 09:11:09 作者：薛彬
在之前做项目的时候经常会在主页面上点击某个按钮，右侧弹出一个div输出对应内容的详细信息，怎么实现的呢，今天小编给大家分享通过jquery实现点击任意位置弹出层外关闭弹出层效果，感兴趣的朋友一起看看吧
在之前做项目的时候经常会在主页面上点击某个按钮，右侧弹出一个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实现点击任意位置弹出层外关闭弹出层效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
jQuery Ajax使用FormData对象上传文件的方法
这篇文章主要介绍了jQuery Ajax使用FormData对象上传文件的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jquery点击获取动态数据进行传参问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了JQuery ztree异步加载实例，感兴趣的小伙伴们可以参考一下2016-02-02
本篇文章主要是对JQUERY 设置SELECT选中项的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最近做项目遇到这样的需求，要求基于jq判断网页是否已经滚动到浏览器底部了，下面小编给大家分享实例代码，需要的朋友参考下吧2017-10-10
基于jquery实现表格内容筛选，本文采用两种方式实现，感兴趣的朋友可以参考下哈，希望对你学习jquery筛选有所帮助2013-04-04
下面介绍自己写的一个jQuery圆角的插件，功能非常简单。目前只能实现1px的固定弧度的圆角矩形边框。2010-10-10
这篇文章主要为大家详细介绍了jquery对象访问是什么及使用方法介绍，感兴趣的小伙伴们可以参考一下2016-05-05
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
query formValidator插件非常好用，但是有一个严重的Bug，在使用ajax验证的时候，如果输入框的内容已经存在，把鼠标放到输入框，不做任何修改再离开，则会提示错误,很是郁闷2013-01-01
Lightbox 应该是最流行的图片浏览效果了，常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。2011-04-04
最新评论