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. PIO Core

    PIO核概述 具有Avalon接口的并行输入/输出(parallel input/output - PIO)核,在Avalon存储器映射(Avalon Memory-Mapped Avalon-MM) ...

  2. ssh 免密及加密远程脚本实现

    windows_host文件路径:C:\Windows\System32\drivers\etc ssh-copy-id -i ~/.ssh/id-rsa.pub root@xxxxxxx 免密验证操 ...

  3. 随机模拟的基本思想和常用采样方法（sampling）

    转自:http://blog.csdn.net/xianlingmao/article/details/7768833 引入 我们会遇到很多问题无法用分析的方法来求得精确解,例如由于式子特别,真的解不 ...

  4. 【Django】模板系统

    目录 一.变量 二.过滤器 Filters 2. length 3. filesizeformat 4. slice 5. add 6. first.last 7. join 8. truncatec ...

  5. php，javascript设置和读取cookie

    1.php设置cookie setcookie($name,$value,expire,path,domain,secrue); //$name:指的是cookie的名字:$value指的是cooki ...

  6. 最近遇到的若干Web前端问题：disable和readonly，JqueryEasyUI，KindEditor

    最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~  一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~  1.readonly和disable的区 ...

  7. 编译安装 gcc 4.9并验证使用

    编译安装 gcc 4.9并验证使用 1. 准备环境(GCC 编译器) centOS 6.3 cat /proc/version Linux version 2.6.32-279.el6.x86_64 ...

  8. DuiVision开发教程(19)-菜单

    DuiVision菜单类是CDuiMenu.有两种显示的位置,一种是在窗体顶部某个button点击后能够下拉一个菜单,还有一种是托盘图标的右键菜单. 窗体中的菜单定义方式是xml文件里设置某个butt ...

  9. Linq聚合函数使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. spring cloud config配置中心源码分析之注解@EnableConfigServer

    spring cloud config的主函数是ConfigServerApplication,其定义如下: @Configuration @EnableAutoConfiguration @Enab ...