JQuery阻止事件冒泡

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

我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。

通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。

<style>

        #content{

            width: 140px;

            border: 1px solid blue;

        }

        #msg{

            width: 100px;

            height: 100px;

            margin: 20px;

            border: 1px solid red;

        }

</style>

　　<body>
　　　　　　<div id="content">
　　　　　　　　　　　　外层div
　　　　　　　　　　　　　　<div id="msg">
　　　　　　　　　　　　　　　　内层div
　　　　　　　　　　　　　　</div>
　　　　　　</div>

　　</body>

 

显示结果

对应的jQuery代码如下：

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(){

            alert("我是小div");

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(){

            alert("我是大div");

        });

        // 为body元素绑定click事件

        $("body").click(function(){

            alert("我是body");

        });

    });

    </script>

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

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

修改如下：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(event){

            alert("我是小div");

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

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(event){

            alert("我是大div");

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

        });

        // 为body元素绑定click事件

        $("body").click(function(event){

            alert("我是body");

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

        });

    });

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

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

html部分

 <body>

        <form action="test.html">

            用户名：<input type="text" id="username" />

            <br/>

            <input type="submit" value="提交" id="sub"/>

        </form>

   </body>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#sub").click(function(event){

                //获取元素的值，val() 方法返回或设置被选元素的值。

                var username = $("#username").val();

                //判断值是否为空

                if(username==""){

                    //提示信息

                    //alert("文本框的值不能为空");

                    $("#msg").html("<p>文本框的值不能为空.</p>");

                  //阻止默认行为 ( 表单提交 )

                    event.preventDefault();

                }

            });

        });

    </script>
//阻止默认行为 ( 表单提交 )

                    event.preventDefault();

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

代码如下：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#sub").click(function(event){

                //获取元素的值，val() 方法返回或设置被选元素的值。

                var username = $("#username").val();

                //判断值是否为空

                if(username==""){

                    //提示信息

                    //alert("文本框的值不能为空");

                    $("#msg").html("<p>文本框的值不能为空.</p>");

                  //阻止默认行为 ( 表单提交 )

                    //event.preventDefault();

                  ;

                }

            });

        });

    </script>
同理，上面的冒泡事件也可以通过return false来处理。
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(function(){

        // 为内层div绑定click事件

        $("#msg").click(function(event){

            alert("我是小div");

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

                return false;

        });

     // 为外层div元素绑定click事件

        $("#content").click(function(event){

            alert("我是大div");

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

                 return false;

        });

        // 为body元素绑定click事件

        $("body").click(function(event){

            alert("我是body");

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

                return false;

        });

    });

Jquery阻断事件冒泡(转载)的更多相关文章

  1. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  2. JQuery中事件冒泡

    JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...

  3. JQuery阻止事件冒泡

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

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

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

  5. jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: ? 1 2 3 4 5 6 7 8 9 10 11 $("form").bind(   "s ...

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

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

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

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

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

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

  9. 整理了一些jQuery关于事件冒泡和事件委托的技巧

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <di ...

随机推荐

  1. Tomcat学习之二：tomcat安装、配置及目录文件说明

    我们看到tomcat目录/bin文件夹里有个tomcat6w.exe,顾名思义就是tomcat以window方式显示控制台.第1次点击打开它时候,可能会提示:tomcat指定的服务未安装,此时我们可以 ...

  2. mysql 下载和 安装

    一.下载mysql 1. 在浏览器里打开mysql的官网http://www.mysql.com/ 2. 进入页面顶部的"Downloads" 3. 打开页面底部的“Communi ...

  3. 第三课 操作系统开发之x86模拟环境搭建

    前面我们讲解了主引导程序的加载过程,并且制作了虚拟软盘a.img,最终这个主引导程序也在机器中成功运行了,但是实际开发的时候,并不会如此简单,免不了调试过程,如果还像上一节中直接将软盘放到机器中去加载 ...

  4. ubuntu journalctl — 检索 systemd 日志

    常用: 查看最近1000行log sudo journalctl -f --lines=1000 -u server.$PROJECT_NAME --no-full, --full, -l 如果字段内 ...

  5. IDEA错误：Cannot start compilation: the output path is not specified for module "XXX".

    错误是发生在从github上checkout自己的项目时.因为没有将配置文件一起上传,所以在运行java程序时有了这个报错: Cannot start compilation: the output ...

  6. Codeforces123E. Maze【树形dp】【概率dp】【证明题】

    LINK 题目大意 一棵树,上面的每个点都有一定概率成为起点和终点 从起点出发,随机游走,并按照下列规则统计count: DFS(x) if x == exit vertex then finish ...

  7. ElasticSearch（十）：springboot集成ElasticSearch集群完成数据的增，删，改

    前言 之前介绍了使用devTools进行索引库数据的crud,这里使用的是java程序,使用中间件activeMQ进行数据库和索引库数据的同步.主要是用来完成对数据库的修改来完成对索引库的同步. 正文 ...

  8. AFN不支持 "text/html" 的数据的问题:unacceptable content-type: text/html

    使用AFN若遇到这个错误信息 Request failed: unacceptable content-type: text/html bug原因: 这不是AFNetworking的问题 这是做Ser ...

  9. Arpa’s obvious problem and Mehrdad’s terrible solution 思维

    There are some beautiful girls in Arpa’s land as mentioned before. Once Arpa came up with an obvious ...

  10. 直接new一个对象出来