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

我们在平时的开发过程中，肯定会遇到在一个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. 看完SQL Server 2014 Q/A答疑集锦:想不升级都难！
			
    看完SQL Server 2014 Q/A答疑集锦:想不升级都难! 转载自:http://mp.weixin.qq.com/s/5rZCgnMKmJqeC7hbe4CZ_g 本期嘉宾为微软技术中心技术 ...
    
			
    2. 
						
  2. Android中手机录屏并转换GIF的两种方式
			
    之前在博文中为了更好的给大家演示APP的实现效果,本人了解学习了几种给手机录屏的方法,今天就给大家介绍两种我个人用的比较舒服的两种方法: (1)配置adb环境后,使用cmd命令将手机界面操作演示存为视 ...
    
			
    3. 
						
  3. 23种设计模式--观察者模式-Observer Pattern
			
    一.观察者模式的介绍      观察者模式从字面的意思上理解,肯定有两个对象一个是观察者,另外一个是被观察者,观察者模式就是当被观察者发生改变得时候发送通知给观察者,当然这个观察者可以是多个对象,在项 ...
    
			
    4. 
						
  4. 猖獗的假新闻：2017年1月1日起iOS的APP必须使用HTTPS
			
    一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...
    
			
    5. 
						
  5. 非关系型数据库（NoSql）
			
    最近了解了一点非关系型数据库,刚刚接触,觉得这是一个很好的方向,对于大数据 方面的处理,非关系型数据库能起到至关重要的地位.这里我主要是整理了一些前辈的经验,仅供参考. 关系型数据库的特点 1.关系型 ...
    
			
    6. 
						
  6. [EasyUI美化换肤]更换EasyUi图标
			
    前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式. ...
    
			
    7. 
						
  7. mongodb
			
    修改所有的记录: > db.t_express_apply.update({},{$set:{"isStatus" : 0}},{multi:true})WriteResul ...
    
			
    8. 
						
  8. 设计模式之单例模式（Singleton）
			
    设计模式之单例模式(Singleton) 设计模式是前辈的一些经验总结之后的精髓,学习设计模式可以针对不同的问题给出更加优雅的解答 单例模式可分为俩种:懒汉模式和饿汉模式.俩种模式分别有不同的优势和缺 ...
    
			
    9. 
						
  9. centos下彻底删除 和重装MYSQL
			
    1 删除Mysql      yum remove  mysql mysql-server mysql-libs mysql-server;       find / -name mysql 将找到的 ...
    
			
    10. 
						
  10. x01.os.22: ubuntu 常用设置
			
    新组装了个 64 位电脑,i5 CPU,进入 ubuntu 后,又是一通搜索设置,整理如下,以备后用. 安装 .dep 包 sudo dpkg -i [filename.dep] 在 ubuntu 中 ...
    
			
    11.