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函数ajax
Aug 20 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
Document 对象的常用方法
Jul 31 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
详解如何用模块化的方式写vuejs
Dec 16 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
Vue 实现拨打电话操作
Nov 16 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/01/24 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue中如何使用ztree
2018/02/06 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python3常见函数range()用法详解
2019/12/30 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
如何理解python对象
2020/06/21 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
安全隐患整改报告
2014/11/06 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android