下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子，我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解，下面整理了更详细的方法，有兴趣的朋友可进入参考。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();

 代码如下 复制代码
$("p").click(function(event){ 
    event.stopPropagation(); // do something 
}) 
 

但是这个方法对使用live 绑 定的事件没有作用，需要一个更简单的方法阻止事件冒泡：return false;

 代码如下 复制代码
$("p").live("click", function(){ 
    $(this).after("Another paragraph!"); 
    return false; 
}); 

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

场景应用： Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

示例测试代码： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation();
代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net /1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />

<title></title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#div1").mousedown(function(event){
            //event.stopPropagation();
            return false;
        });
        $("#div2").mousedown(function(event){
            alert("trigger mousedown event of rootDiv");
        });
    });
</script>
</head>
<body>
    <div id="rootDiv" style="position:relative;left:400px;top:200px;">
        <div>1.单击输入框，使输入框获取焦点：</div>
        <input id="input1" style="width:250px;" type="text"></input>
        <div id="div2">
            <div id="div1"
style="width:200px;height:200px;"><br><
br>2.然后再单击这里</div>
        </div>
    </div>
</body>
</html>

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

下面是html代码部分：

 代码如下 复制代码

<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<div id="msg"></div>
</body>

对应的jQuery代码如下：

 代码如下 复制代码

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
        $('#msg').html(txt);// 设置html信息
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

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

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

修改如下：

 代码如下 复制代码

<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

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

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

下面是案例：

 代码如下 复制代码

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值，val() 方法返回或设置被选元素的值。
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             event.preventDefault();  //阻止默认行为 ( 表单提交 )
         }
   })
})
</script>

html部分：

<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>

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

代码如下：

 代码如下 复制代码

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             return false;
         }
   })
})
</script>

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

 代码如下 复制代码

<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

由此可以看出：

1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.returnfalse;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
如果把它放在头部A标签的click事件中，点击“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

jQuery阻止事件冒泡的例子的更多相关文章

  1. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

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

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  3. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  4. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  5. 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  6. JQuery 阻止事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...

  7. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...

  8. jquery阻止事件冒泡的方法

    $("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...

  9. Jquery阻断事件冒泡(转载)

    JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...

随机推荐

  1. C++、GDAL创建shapefile文件

    源代码网址:http://download.csdn.net/detail/ivanljf/5834823 一.先贴出第一段代码: #include "ogrsf_frmts.h" ...

  2. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  3. poj3468A Simple Problem with Integers(线段树，在段更新时要注意)

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  4. C#中的Collection 3

    IList<T> 和 ICollection<T> 最重要的一些类型 List<T>: Encapsulates[T], like array, but also ...

  5. Oracle用户、权限、角色管理

    Oracle 权限设置一.权限分类:系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的).   二.系统权 ...

  6. Nginx系列~Nginx服务启动不了

    Nginx服务有时起动不了了,原因是80端口为其它应用程序占用了,这时,我们需要查看是哪个程序占用了它,可能是IIS的某个站点,或者Tomat,Apache等,都有可能,所以,我们需要查看一下电脑80 ...

  7. js 对象与函数的区别

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 以静态变量保存 Spring ApplicationContext

    package com.thinkgem.jeesite.common.utils; import java.net.HttpURLConnection; import java.net.URL; i ...

  9. Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标

    Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...

  10. Slony-I中对storelisten出错的处理

    客户质询的现象是: Slony-I运行中,log中发现FATAL信息: FATAL storeListen: unknown node ID 出现了上述错误后,再看后继的log,又恢复正常运行了. 客 ...