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控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
javascript求日期差的方法
Mar 02 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
vue实现搜索功能
May 28 Javascript
详解React 条件渲染
Jul 08 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
浅谈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 adodb分页实现代码
2009/03/19 PHP
php下将XML转换为数组
2010/01/01 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP的引用详解
2015/02/22 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
javascript中常用编程知识
2013/04/08 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python妙用之编码的转换详解
2017/04/21 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python识别验证码图片实例详解
2020/02/17 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
《童年》教学反思
2014/02/18 职场文书
科学发展观活动总结
2014/08/28 职场文书
检讨书范文
2019/04/16 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技