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

下面是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>

jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。的更多相关文章

  1. jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

    jquery 添加与删除的规律 当要添加时候要定位到自己的父元素  当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

  2. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

  3. 子组件通过$emit触发父组件的事件时，参数的传递

    子组件.vue <template> <div> <el-table :data="comSchemaData" highlight-current- ...

  4. JQuery阻止事件冒泡

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

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

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

  6. jQuery阻止事件冒泡的例子

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

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

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

  8. 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？

    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...

  9. 阻止事件冒泡js jquery

    jQuery之防止冒泡事件 冒泡事件就是点击子节点,会向上触发父节点.祖先节点的点击事件. 以下是html代码部分: <body> <div id="content&quo ...

随机推荐

  1. ubuntu删除openjdk，安装 Sun JDK

    1.到官网下载安装包: jdk-7-linux-i586.tar.gz 2.创建安装目录:sudo mkdir /usr/lib/jvm 3. 解压缩:tar zxvf ./jdk-7-linux-i ...

  2. div大小如何改变设置

    如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...

  3. 转：Mysql读写分离实现的三种方式

    1 程序修改mysql操作类可以参考PHP实现的Mysql读写分离,阿权开始的本项目,以php程序解决此需求.优点:直接和数据库通信,简单快捷的读写分离和随机的方式实现的负载均衡,权限独立分配缺点:自 ...

  4. COJ 0970 WZJ的数据结构（负三十）树分治

    WZJ的数据结构(负三十) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个点的无根树,点和边上均有权值.请你设计 ...

  5. POJ 2112 Optimal Milking（Floyd+多重匹配+二分枚举）

    题意:有K台挤奶机,C头奶牛,每个挤奶机每天只能为M头奶牛服务,下面给的K+C的矩阵,是形容相互之间的距离,求出来走最远的那头奶牛要走多远   输入数据: 第一行三个数 K, C, M  接下来是   ...

  6. Xshell中文编码的设置

    一直用的是SSH Secure Shell Client,关于中文乱码,一直找不到简便的解决方案,后来改用XShell,编码设置如下: 1.查看linux系统编码,linux命令: locale. 2 ...

  7. Jenkins 六： 构建中执行shell或者 windows的批处理程序

    Shell/ bat Jenkins 可以在构建中执行shell命令或者windows的batch 命令. 1. 选择一个项目,点击“配置”. 2. 找到“构建” –> “增加构建步骤”.选择 ...

  8. G - Shuffle'm Up

    题目大意: 是一个洗牌游戏,首先给出两堆牌,s1,s2,先从s1上面拿一张牌再从s2上面拿一张牌依次往下可以洗好牌,然后把洗好的牌再分成两堆继续洗,直到这堆牌的顺序与给的顺序相同可以停止,当然如果洗不 ...

  9. [置顶] 【Git入门之十四】Git GUI

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12374495 文章都快写完了,Git GUI才浮出水面,很多人要骂我,这么方 ...

  10. Java RTTI和反射

    一.Java的RTTI  RTTI(Run-Time Type Identification,通过运行时类型识别)的含义就是在运行时识别一个对象的类型,其对应的类是Class对象,每个java里面的类 ...