点击某个div打开层,点击其他div 关闭层(阻止冒泡)
来源:互联网 发布:淘宝联盟发券机器人 编辑:程序博客网 时间:2024/05/16 07:57
其实很早就学过js一些高级部分的知识,但是用的不多,也就慢慢淡忘了。最近发现随着编程的深入,你不得不用到它们,比如事件的冒泡。
有一需求如下:
①点击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(); }) })
0 0
- 点击某个div打开层,点击其他div 关闭层(阻止冒泡)
- 解决/阻止 div层内的div层点击事件冒泡触发的小方法
- jquery点击空白处关闭div层
- 点击 div 弹出层
- 点击div层之外的其他地方关闭弹出层
- 点击表格中的某个列,弹出一个div层
- Div层(点击可折叠展开)
- 拖动、关闭、打开DIV层
- div层显示,点击div层外面隐藏层
- 解决 父层div和子层div点击事件冲突 (冒泡触发的小方法)
- 点击对象弹出DIV层菜单可以定时自动关闭
- 点击弹出div层带遮罩可拖动和关闭层
- 点击按钮div层弹出,点击空白处div隐藏
- 动画效果鼠标点击打开/关闭层
- JS实现点击文本框弹出DIV层
- 点击空白处隐藏div层
- 【Jquery】jquery点击按钮弹出div层
- 两层div点击弹出div背影阴影
- Android 单元测试
- 浏览器输入网址后后台是如何运作的
- LeetCode——Find Minimum in Rotated Sorted Array
- A4纸尺寸说明
- 加州理工学院公开课:机器学习与数据挖掘_神经网络
- 点击某个div打开层,点击其他div 关闭层(阻止冒泡)
- 在线JS动态效果-收集
- [0day]基础工具学习
- C语言文件读写操作
- C#笔记
- ggplot2作图详解:图层语法和图形组合
- 常用adb命令整理
- UIP学习第一天
- ggplot2作图详解:标尺(scale)设置