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

下面是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. myclips常用快捷键

    -------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...

  2. C# RAS 非对称加密类 支持长字符串

    /// <summary> /// ikmb@163.com /// </summary> public class MyRAS { /// <summary> / ...

  3. HDU2059（龟兔赛跑）

    龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. @property 的本质是什么？ivar、getter、setter 是如何生成并添加到这个类中的

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu @property 的本质是什么? @ ...

  5. 348. Design Tic-Tac-Toe

    提示给的太直白了.. 比如player 1占据了(0,1),那么row[0]++ col[1]++ 表示第一行有1个O,第一列有1个X,假设PLAYER 1最终在第一行连成一排,那最终row[0] = ...

  6. dubbo源码分析三：consumer注册及生成代理对象

    本章我们将分析一下consumer向注册中心注册,并获取服务端相应的信息,根据这些信息生产代理对象的过程和源码. 1.类图 上图展示了部分消费者注册及生成代理对象过程中需要使用到的类和接口,其中: s ...

  7. FusionCharts的使用入门

    1. Fusioncharts 介绍: Fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,fusioncharts可用于任何网页脚本语言如, HTML格式,JSP ...

  8. Amoeba for MySQL 非常好用的mysql集群软件

    http://docs.hexnova.com/amoeba/ Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专 ...

  9. 最近新出的C++右值引用的意思

    看了一下这种方法的介绍,个人感觉,右值引用,更像人类的思想了,有些将编译前与编译后结合紧密的感觉. 左值引用是变量名的别名,右值引用是值的别名,也就是不将值赋给一个变量名所在的地址,直接将值所在的初始 ...

  10. Git客户端（Windows系统）的使用

    本文环境: 操作系统:Windows XP SP3 Git客户端:TortoiseGit-1.8.5.0-32bit 一.安装Git客户端 全部安装均采用默认! 1. 安装支撑软件 msysgit:  ...