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 相关文章推荐
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
JS访问对象两种方式区别解析
Aug 29 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文件的实现方法
2007/03/19 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
土建专业大学生自荐信范文
2014/04/09 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
施工安全承诺书
2014/05/22 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
房屋转让协议书
2014/10/18 职场文书
党员个人自我评价
2015/03/03 职场文书
航班延误投诉信
2015/07/02 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js