冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。

通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。

<style>

        #content{

            width: 140px;

            border: 1px solid blue;

        }

        #msg{

            width: 100px;

            height: 100px;

            margin: 20px;

            border: 1px solid red;

        }

</style>

　　<body>
　　　　　　<div id="content">
　　　　　　　　　　　　外层div
　　　　　　　　　　　　　　<div id="msg">
　　　　　　　　　　　　　　　　内层div
　　　　　　　　　　　　　　</div>
　　　　　　</div>



　　</body>


 




显示结果


对应的jQuery代码如下：




 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(){

            alert("我是小div");

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(){

            alert("我是大div");

        });

        // 为body元素绑定click事件

        $("body").click(function(){

            alert("我是body");

        });

    });

    </script>




当点击小div时，会触发大div与body 的点击事件。点击大div时会触发body的点击事件。


如何防止这种冒泡事件发生呢？


修改如下：




<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(event){

            alert("我是小div");

            event.stopPropagation();    //  阻止事件冒泡

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(event){

            alert("我是大div");

            event.stopPropagation();    //  阻止事件冒泡

        });

        // 为body元素绑定click事件

        $("body").click(function(event){

            alert("我是body");

            event.stopPropagation();    //  阻止事件冒泡

        });

    });
        




event.stopPropagation(); // 阻止事件冒泡


有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。


html部分




 <body>

        <form action="test.html">

            用户名：<input type="text" id="username" />

            <br/>

            <input type="submit" value="提交" id="sub"/>

        </form>

   </body>








<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#sub").click(function(event){

                //获取元素的值，val() 方法返回或设置被选元素的值。

                var username = $("#username").val();

                //判断值是否为空

                if(username==""){

                    //提示信息

                    //alert("文本框的值不能为空");

                    $("#msg").html("<p>文本框的值不能为空.</p>");

                  //阻止默认行为 ( 表单提交 )

                    event.preventDefault();

                }

            });

        });

    </script>




//阻止默认行为 ( 表单提交 )

                    event.preventDefault();  


还有一种防止默认行为的方法就是return false。效果一样。


代码如下：




<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#sub").click(function(event){

                //获取元素的值，val() 方法返回或设置被选元素的值。

                var username = $("#username").val();

                //判断值是否为空

                if(username==""){

                    //提示信息

                    //alert("文本框的值不能为空");

                    $("#msg").html("<p>文本框的值不能为空.</p>");

                  //阻止默认行为 ( 表单提交 )

                    //event.preventDefault();

                  return false;

                }

            });

        });

    </script>




同理，上面的冒泡事件也可以通过return false来处理。




 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(event){

            alert("我是小div");

            //event.stopPropagation();    //  阻止事件冒泡

                return false;

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(event){

            alert("我是大div");

            //event.stopPropagation();    //  阻止事件冒泡

                 return false;

        });

        // 为body元素绑定click事件

        $("body").click(function(event){

            alert("我是body");

            //event.stopPropagation();    //  阻止事件冒泡

                return false;

        });

    });                    






 
												


											
JQuery阻止事件冒泡的更多相关文章
	

    
								
  1. js阻止冒泡及jquery阻止事件冒泡示例介绍
		
    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
    
		
    2. 
						
  2. js 事件冒泡是什么如何用jquery阻止事件冒泡
		
    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...
    
		
    3. 
						
  3. JQuery阻止事件冒泡---阻止后续代码执行
		
    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
    
		
    4. 
						
  4. 事件冒泡是什么如何用jquery阻止事件冒泡
		
    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
    
		
    5. 
						
  5. jQuery阻止事件冒泡的例子
		
    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...
    
		
    6. 
						
  6. JQuery 阻止事件冒泡
		
    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...
    
		
    7. 
						
  7. jquery阻止事件冒泡的3种方式
		
    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...
    
		
    8. 
						
  8. jquery阻止事件冒泡的方法
		
    $("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...
    
		
    9. 
						
  9. Jquery阻断事件冒泡(转载)
		
    JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？
			
    写在前面 阅读目录: 具体业务场景 业务需求变化 "愚蠢"的应对 消息列表实现 消息详情页实现 消息发送.回复.销毁等实现 回到原点的一些思考 业务需求变化,领域模型变化了吗? 对 ...
    
			
    2. 
						
  2. TODO：Laravel 使用blade标签布局页面
			
    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
    
			
    3. 
						
  3. Ajax 概念 分析 举例
			
    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
    
			
    4. 
						
  4. Mysql事务探索及其在Django中的实践（一）
			
    前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...
    
			
    5. 
						
  5. 【微框架】之一：从零开始，轻松搞定SpringCloud微框架系列--开山篇（spring boot 小demo）
			
    Spring顶级框架有众多,那么接下的篇幅,我将重点讲解SpringCloud微框架的实现 Spring 顶级项目,包含众多,我们重点学习一下,SpringCloud项目以及SpringBoot项目  ...
    
			
    6. 
						
  6. Android注解使用之注解编译android-apt如何切换到annotationProcessor
			
    前言: 自从EventBus 3.x发布之后其通过注解预编译的方式解决了之前通过反射机制所引起的性能效率问题,其中注解预编译所采用的的就是android-apt的方式,不过最近Apt工具的作者宣布了不 ...
    
			
    7. 
						
  7. Android探索之AIDL实现进程间通信
			
    前言: 前面总结了程序间共享数据,可以使用ContentProvider也可以使用SharedPreference,那么进程间怎么共享内存呢?Android系统中的进程之间不能共享内存,因此,需要提供 ...
    
			
    8. 
						
  8. shiro权限管理框架与springmvc整合
			
    shiro是apache下的一个项目,和spring security类似,用于用户权限的管理‘ 但从易用性和学习成本上考虑,shiro更具优势,同时shiro支持和很多接口集成 用户及权限管理是众多 ...
    
			
    9. 
						
  9. Windows 常用运行库下载 (DirectX、VC++、.Net Framework等)
			
    经常听到有朋友抱怨他的电脑运行软件或者游戏时提示缺少什么 d3dx9_xx.dll 或 msvcp71.dll.msvcr71.dll又或者是 .Net Framework 初始化之类的错误而无法正常 ...
    
			
    10. 
						
  10. JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）
			
    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传.  ...
    
			
    11.