事件冒泡

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

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

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. Html5的map在实际使用中遇到的问题及解决方案

    前言:百度了一下html map,嗯嗯,介绍的挺详细的,如果是初学者,直接看他们的教程,挺好的,就不用我再多说了. 不过我发现一个问题,就是都是介绍map有什么属性怎么用的,这明显就是照搬文档自己再改 ...

  2. HTML表单特别效果—音量调节，购物数量

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="ra ...

  3. ezdpl：完全依赖脚本和ssh的自动化部署方案

    ezdpl是easy deployment的简写,使用简单的ssh和shell脚本来部署.升级.回滚和重新配置linux服务器. 重要提示:警告:这个项目还处于测试过程中,请仔细阅读说明,并且自己承担 ...

  4. ViewPager+handler实现轮播

    先说下功能吧,随便设置一个网络图片链接的集合,作为图片的资源.我用ImageLoader来加载图片,在图片未加载完成时会ProgressBar加载状态 在Handler发送一个空消息来实现页面的轮播 ...

  5. 【2015 Week Task】

    2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理

  6. js 中有关字符串的操作

    1. substring(start, end) 1). 包头不包尾 2). start 必需项 3). end 非必需项 4). start end 谁大谁小无所谓 5). start end 若为 ...

  7. MonkeyRunnermac

    http://blog.csdn.net/wyb199026/article/details/51436754 背景 之前想学习自动化测试的时候,就研究过MonkeyRunner,说实话MonkeyR ...

  8. MySQL 5.7 修改数据物理文件目录

    修改MySQL数据库物理文件存放位置,需要在MySQL配置文件中修改相关参数.安装MySQL5.7后,在MySQL安装目录下没有找到数据库物理文件,最后经过查找发现其在“C:\ProgramData\ ...

  9. May 26th 2017 Week 21st Friday

    One thorn of experience is worth a whole wilderness of warning. 一次痛彻心扉的经历,抵得上千百次的告诫. Several days ag ...

  10. CRUD全栈式编程架构之服务层的设计

    服务层代码 首先我先放出2个主要类的代码再分别讲解 接口 using System; using System.Collections.Generic; using System.Linq; usin ...