jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)


Posted in Javascript onNovember 18, 2016

本文实例讲述了jQuery实现点击某个div打开层,点击其他div关闭层的方法。分享给大家供大家参考,具体如下:

其实很早就学过js一些高级部分的知识,但是用的不多,也就慢慢淡忘了。最近发现随着编程的深入,你不得不用到它们,比如事件的冒泡。

jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)

有一需求如下:

①点击class = "click" 块 弹出 class="pop" 块
②点击class = "page" 块 关闭 class="pop" 块
③点击class = "pop" 块 不关闭任何块

如果用jQuery 鲁莽一点,直接的程序就写出来了

<script>
 $(function(){
   $('.click').click(functon(){
     $('.pop').show();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
 })
</script>

你这么一闹腾,问题就出来了,当我点击"click"块的时候,妹的,我还没看到弹出层 "pop",瞬间就关闭了,这是为什么呢?因为你点击"click" 的瞬间,触发了两个事件,第一个是 自己本身的点击事件,因为自己的父层也注册了点击事件,那第二个父层的点击事件也被触发了,即所谓的事件冒泡。

我又想保留这两个事件,但又不想出现这样的情况,怎么办,这就是我要说的 阻止事件冒泡。

阻止事件冒泡大致有两种办法:

1)使用 return false;
2)使用
event.stopPropagation();

其实两者的原理差不多,就是屏蔽要冒泡的对象

$(function(){
   $('.click').click(functon(event){
     $('.pop').show();
     event.stopPropagation();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

或者:

$(function(){
   $('.click').click(functon(){
     $('.pop').show();
     return false;
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript操作数组详解
Dec 17 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue实现学生信息管理系统
May 30 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 #Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 #Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 #Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 #Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 #Javascript
form+iframe解决跨域上传文件的方法
Nov 18 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
js性能优化技巧
2015/11/29 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
详解React中setState回调函数
2018/06/14 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Django视图类型总结
2021/02/17 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
某公司C#程序员面试题笔试题
2014/05/26 面试题
党校培训自我鉴定
2014/02/01 职场文书
教师年度考核评语
2014/04/28 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
加薪通知
2015/04/25 职场文书
好员工观后感
2015/06/17 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
原生JS实现分页
2022/04/19 Javascript