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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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扩展开发教程(总结)
2015/11/04 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
linux下python抓屏实现方法
2015/05/22 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Sanic框架配置操作分析
2018/07/17 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
保密普查工作实施方案
2014/02/25 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
植物生产学专业求职信
2014/08/08 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
网络妈妈观后感
2015/06/08 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
中学教代会开幕词
2016/03/04 职场文书
导游词之神仙居景区
2019/11/15 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server