事件冒泡

首先需要知道什么是事件冒泡？

事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件

demo：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>4-4-1</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        body {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #content {

            width: 220px;

            border: 1px solid #0050D0;

            background: #96E555;

        }

        span {

            width: 200px;

            margin: 10px;

            background: #666666;

            cursor: pointer;

            color: white;

            display: block;

        }

        p {

            width: 200px;

            background: #888;

            color: white;

            height: 16px;

        }

    </style>

    <script src="../scripts/jquery-1.3.1.js"></script>

    <script type="text/javascript">

        $(function () {

            // 为span元素绑定click事件

            $('span').bind("click", function () {

                $("#msg").append("<p>内层span元素被点击.<p/>")

            });

            // 为div元素绑定click事件

            $('#content').bind("click", function () {

                $("#msg").append("<p>外层div元素被点击.<p/>")

            });

            //// 为body元素绑定click事件

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

                $("#msg").append("<p>body元素被点击.<p/>")

            });

        })

    </script>

</head>

<body>

    <div id="content">

        外层div元素

        <span>内层span元素</span>

        外层div元素

    </div>

    <div id="msg"></div>

</body>

</html>

　　

当点击内层的span事件时，外层的div事件和body，也会执行的。

如何阻止冒泡事件？

一般来说有三种方法：

  1. 使用stopstopPropagation；
  2. 使用retrun false;
  3. 使用阻止默认行为preventDefault；

1.使用stopstopPropagation

只需要在后面加入event.stopPropagation();就可以阻止事件冒泡

  $('span').bind("click", function () {

                $("#msg").append("<p>内层span元素被点击.<p/>")

                event.stopPropagation();

            });

2.使用retrun false；

  $('span').bind("click", function () {

                $("#msg").append("<p>内层span元素被点击.<p/>")

                return false;

            });

3.使用阻止默认行为

JQuery阻止默认行为

retrun false和 stopstopPropagation的区别

return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。

event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？的更多相关文章

  1. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  2. jquery中，使用append增加元素时，该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  3. jquery中，使用append增加新元素时，新增元素的绑定监听事件失效的解决办法

    $("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...

  4. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  5. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  6. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  7. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  8. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  9. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

随机推荐

  1. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...

  2. [PAMI 2018] Differential Geometry in Edge Detection: accurate estimation of position, orientation and curvature

    铛铛铛,我的第一篇文章终于上线了,过程曲折,太不容易了--欢迎访问--- https://ieeexplore.ieee.org/document/8382271/ 后面有需要的话可以更新一下介绍,毕 ...

  3. 使用HTML5 canvas做地图（2）瓦片以及如何计算的

    上一篇也说到瓦片,我们为什么使用瓦片?这一篇主要是关于如何拼接地图? 下面的一张图,可以一眼明了,地图是如何切割以及拼接的. 瓦片信息 瓦片信息包括切图原点,瓦片大小,格式,分辨率以及分辨率级别等. ...

  4. ORACLE_FUNCTION

    FUNCTION: DEFINE:函数一般用于计算和返回一个值,可以将经常需要使用的计算或功能写成一个函数. 1.basic syntax create [or replace] function f ...

  5. June 09th 2017 Week 23rd Friday

    The supreme happiness of life is the conviction that we are loved. 生活中最大的幸福就是,坚信有人爱着我们. One of my go ...

  6. ZT在谷歌上班感受如何？

    在谷歌上班感受如何? 2013-11-05 作者:腾讯科技 出处: 互联网 责编:zlu     在谷歌这家全球最大最有抱负的技术公司工作将是怎样的情景呢?是天堂般的享受,还是地狱般的折磨呢?下面看一 ...

  7. [总结]Perl在遇到Unicode字符文件名时的各种处理方法

    环境 XP/WIN7  Perl v5.16 编辑整理:523066680 常见的那些文件操作函数都不支持,于是为了达到目的,需要各种方法配合,应该是不如其他语言方便. 我只是想看看Perl到底是否适 ...

  8. python接口测试-项目实践（一） 测试需求与测试思路

    测试需求: 第三方系统提供了3个接口,需要测试前端显示的字符串里的对应数据与接口数据是否一致. 测试分层: 开发人员的设计:每周从接口取一次数据,拼接完成后保存到数据库.再从数据库取数提供接口给前端开 ...

  9. 数据结构学习-数组A[m+n]中依次存放两个线性表(a1,a2···am),(b1,b2···bn),将两个顺序表位置互换

    将数组中的两个顺序表位置互换,即将(b1,b2···bn)放到(a1,a2···am)前边. 解法一: 将数组中的全部元素(a1,a2,···am,b1,b2,···bn)原地逆置为(bn,bn-1, ...

  10. 设计模式——建造者模式(BuilderPattern)

    建造者模式(Builder):将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. UML图: Builder: package com.cnblog.clarck; /** * ...