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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python如何使用代码运行助手
2020/07/03 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
公司成立感言
2014/01/11 职场文书
地理教师岗位职责
2014/03/16 职场文书
关于环保的广播稿
2015/12/17 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL