本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
- jQuery控制DIV层实现由大到小，由远及近动画变化效果
- jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
- jQuery实现DIV层收缩展开的方法
- jQuery实现鼠标滑过Div层背景变颜色的方法
- jQuery实现DIV层淡入淡出拖动特效的方法
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- jQuery div层的放大与缩小简单实现代码
- 基于jquery的模态div层弹出效果
- jQuery中阻止冒泡事件的方法介绍
- js阻止冒泡及jquery阻止事件冒泡示例介绍
- jquery阻止冒泡事件使用模拟事件
- jQuery阻止冒泡和HTML默认操作
