jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系.       事件:现在我们都在这两个元素上绑定相同的事件,比如click事件.       结果:这时,当我们点击内层的P标签的时候

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • jQuery中阻止冒泡事件的方法介绍

    一.冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行.比如:div下的a都有click事件,点击a的时候,会alert出现2次.这个现象叫做冒泡事件. 这个事件从原始元素开始一直冒泡到DOM树的最上层.目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事 件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • jQuery控制DIV层实现由大到小，由远及近动画变化效果

    jQuery控制DIV层实现由大到小，由远及近动画变化效果

    本文实例讲述了jQuery控制DIV层实现由大到小,由远及近动画变化效果.分享给大家供大家参考.具体如下: 这里介绍jQuery控制DIV由大到小,由远及近动画变化效果,使用jquery生成动画效果的一个小例子,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jquery阻止冒泡事件使用模拟事件

    复制代码 代码如下: <body> <div class="content"> <span>单击显示隐藏内容</span> </div> <div class="message">这里是隐藏内容</div> </body> <script> $(document).ready(function(){ $("span").bind("

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

  • jQuery实现DIV层收缩展开的方法

    本文实例讲述了jQuery实现DIV层收缩展开的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • jQuery div层的放大与缩小简单实现代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .content { border: 1px solid #ccc; width: 440px; overflow: hidden; margin: 10p

  • jQuery实现DIV层淡入淡出拖动特效的方法

    本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 {     position:absolute;     width:400px;     height:300px;     border

  • 基于jquery的模态div层弹出效果

    基于jquery的模态div层弹出效果

    经过几多周折,终于搞出来了,效果图如下: 具体实现: (1) 编写 jquery.divbox.js 的代码: 复制代码 代码如下: jQuery.fn.extend( { OpenDiv: function() { var sWidth, sHeight; sWidth = window.screen.availWidth; if (window.screen.availHeight > document.body.scrollHeight) { sHeight = window.screen

随机推荐