jQuery之防止冒泡事件

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

以下是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();
// 阻止事件冒泡

有时候点击提交button会有一些默认事件。比方跳转到别的界面。可是假设没有通过验证的话，就不应该跳转。这时候能够通过设置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>

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

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

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

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

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

  3. JQuery阻止事件冒泡

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

  4. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

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

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

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

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

  7. JQuery中阻止事件冒泡的两种方式及其区别

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

  8. JQuery中阻止事件冒泡方式及其区别

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

  9. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

随机推荐

  1. 大型网站架构之JAVA中间件

    中间件就是在大型网站中,帮助各子模块间实现互相访问,消息共享或统一访问等功能的软件产品.常见的有: 远程服务框架中间件:主要解决各子模块之间互相访问的问题. 消息队列中间件:主要解决各子模之间消息共享 ...

  2. ajax --- Ajax跨域请求保证同一个session的问题

    我们知道,根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务 ...

  3. Android 使用Retrofit获取JSON数据

    在大家使用网络请求的时候,往往会出现一种情况:需要拿到服务器返回来的JSON字符串,而Retrofit会默认将Json解析,而又没有直接暴露出拿到Json字符串的方法: 今天测接口的时候,发现当数据正 ...

  4. Oracle 审计初步使用

    新增一个表空间用于存储审计日志 SQL> CREATE tablespace audit_data datafile '/data/oradata/orcl/audit01.dbf' SIZE ...

  5. Mysql source导入.sql文件深坑！

    刚刚接手一个项目,给老系统加功能.把数据库考出来一个.sql文件就170多M. 使用mysql命令行source 我的.sql文件. 导了一宿都没导完,然后发现里面的数据怎么是乱码呢.. 崩溃额,在排 ...

  6. javaScript 立即执行函数学习笔记

    立即执行函数: 即执行函数(Immediate Functions),立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行 立即执行函数(immediate function)术语不是在ECM ...

  7. 【Henu ACM Round#17 D】Hexagons!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 题目的图吓人. 找下规律就会发现从内到外是1,6,12,18 即1,16,26,36... 即1+6(1+2+3+...) 等差求和 ...

  8. 【Uva 10723】Cyborg Genes

    [Link]: [Description] 给你两个串s1,s2; 让你生成一个串S; 使得s1和s2都是S的子列; 要求S最短; 求S的不同方案个数; [Solution] 设两个串的长度分别为n1 ...

  9. leetcode第一刷_Scramble String

    字符串的好题. 题干解释的很复杂.一下让人不知所措了. 这道题究竟是什么意思呢?终于的结果是把一个字符串中字母的顺序打乱了,让你推断一个字符串能不能由还有一个字符串打乱得到.那打乱这个过程是怎么做的呢 ...

  10. DataTable填充实体类返回泛型集合

    昨天找坤哥看到我的一段代码.例如以下: 略微解释下,这段代码时D层查询结束后,将datatable查询到的结果赋值给实体对象的属性,然后返回实体的过程.坤哥看了之后问我.假设实体有500多个属性.难道 ...