jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016-11-18 11:24
417 查看
本文实例讲述了jQuery实现点击某个div打开层,点击其他div关闭层的方法。分享给大家供大家参考,具体如下:
其实很早就学过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(); }) })
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 点击某个div打开层,点击其他div 关闭层(阻止冒泡)
- jQuery实现点击按钮弹出一个div,点击其他区域关闭该div
- Javascript点击其他任意地方隐藏关闭DIV实例
- jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
- jQuery阻止事件冒泡实例分析
- Javascript点击其他任意地方隐藏关闭DIV实例
- 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
- jQuery实现div拖拽效果实例分析
- jQuery实现点击其他地方div隐藏
- jQuery实现点击展开其他自动关闭
- jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
- JQuery实现DIV其他动画效果的简单实例
- jquery 实现点击其他地方隐藏之前点击显示的div标签等
- jQuery实现div拖拽效果实例分析
- jQuery实现点击其他地方div隐藏
- jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
- JQuery实现DIV其他动画效果的简单实例
- jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
- Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例(二)
- jquery 点击页面其他地方实现隐藏菜单功能