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. Java eclipse Myeclipse tomcat安装及配置

    Java eclipse Myeclipse tomcat安装及配置作者:天涯 来源:中国自学编程网 发布日期:1223857747目前,开发Java网页程序,最流行的就是用Myeclipse来进行编 ...

  2. [NLP] TextCNN模型原理和实现

    1. 模型原理 1.1 论文 Yoon Kim在论文(2014 EMNLP) Convolutional Neural Networks for Sentence Classification提出Te ...

  3. HTTP之get post

    1.什么是URL URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资源都有一个 ...

  4. opencv-python教程学习系列13-图像平滑

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍图像平滑,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环境 系统: ...

  5. 使用git错误日志

    错误日志 pull错误 将远程仓库内容pull下来的过程中,碰到了拒绝合并两个不相关的历史,所以无法下载,同样的也无法push 但是我的东西明明是从组织里克隆下来的,只是做了一些修改 后来我我尝试不替 ...

  6. Ubuntu 18.04 搜狗输入法无法切换到英文输入

    不知道改了个什么东西,Ubuntu 中Ctrl+Space不能切换输入法了,因此不能输入英文,shell就更是没法工作,最后找到方法了: 在终端键入fcitx-config-gtk3,这时候如果直接在 ...

  7. HDU 4548：美素数

    Problem Description 小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识. 问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素 ...

  8. POJ 3254 Corn Fields状态压缩DP

    下面有别人的题解报告,并且不止这一个状态压缩题的哦···· http://blog.csdn.net/accry/article/details/6607703 下面是我的代码,代码很挫,绝对有很大的 ...

  9. Flask, Tornado, GEvent组合运行与性能比较

    我在选一个python的互联网框架, 本来已经定下来用Tornado了.  但我还听到很多人推荐Flask的简单性和灵活性, 还有gevent的高性能, 所以决定也试试它们以及它们和Tornado的结 ...

  10. 进程间通信--POSIX消息队列

    相关函数: mqd_t mq_open(const char *name, int oflag); mqd_t mq_send(mqd_t mqdes, const char *msg_ptr, si ...