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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
详解Vue的ref特性的使用
Jan 24 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
phpize的深入理解
2013/06/03 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
思想汇报范文
2013/11/04 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
前处理组长岗位职责
2014/03/01 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014年公司工作总结
2014/11/22 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android
小程序自定义轮播图圆点组件
2022/06/25 Javascript